施 莹 茹 志 鹏 徐建华 主编 


网 站 建设 与 网 页 设计 
项 目 化 教程 


© 





清华 大 学 出 版 社 





21 世纪 计算 机 科学 与 技术 实践 型 教程 


网 站 建设 与 网 页 设计 
项 目 化 教程 


内 容 简 介 


本 书 是 作者 根据 多 年 从 事 网 站 设计 及 教学 工作 的 经 验 ,其 特色 是 以 网 页 制作 主流 的 软件 一 一 网 页 
三 剑客 Dreamweaver、Fireworks 和 Flash 为 主线 ,对 网 页 设计 与 制作 技术 进行 了 全 面 深入 的 讲解 ,将 网 
页 制作 技术 适当 分 层 编写 , 精 选 教学 案例 ,做 到 既 有 理论 又 有 实践 ,采用 “知识 点 十 实例 操作 ”的 结构 来 
讲解 。 本 书 实用 性 强 、 知 识 点 新 ,层次 清楚 .由 浅 入 深 、 循 序 渐进 ,所 选 的 案例 均 是 实战 中 的 典型 案例 , 便 
于 读者 学 习 和 应 用 ,并 真正 达到 举一反三 。 全 书 贯穿 了 不 同行 业 的 多 种 实例 ,各 实例 均 经 过 精心 设计 ， 
操作 步骤 清晰 简明 ,技术 分 析 深入 浅 出 ,实例 效果 精美 ,还 精心 配备 了 PPT 电子 课件 .教学 视频 ,便于 老 
师 课堂 教学 和 学 生 把 握 知 识 要 点 。 

本 教材 浅显 易 懂 , 实 践 性 与 指导 性 较 强 , 特 别 适合 网 页 设计 与 制作 的 初级 用 户 , 可 作为 高 中 起 点 本 
科 或 大 专 院 校 计算 机 专业 学 生 的 教材 ,也 可 作为 相关 领域 人 员 的 网 页 设计 入 门 学 习 用 书 或 参考 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数 据 


网 站 建设 与 网 页 设计 项 目 化 教程 / 施 莹 , 茹 志 鹃 ,徐建华 主编 .一 北京 : 清华 大 学 出 版 社 , 2017 
(21 世纪 计算 机 科学 与 技术 实践 型 教程 ) 
ISBN 978-7-302-44691-0 


I 网 … 下 @ 施 … @ 茹 … @ 徐 … 由. 网 站 一 建设 一 高 等 学 校 一 教材 @ 网 页 制作 工具 一 高 
等 学 校 一 教材 .TP393.092 


中 国 版 本 图 书馆 CIP 数据 核 字 (2016) 第 184634 号 


责任 编辑 : 谢 琛 薛 阳 
封面 设计 : 何 风 息 
责任 校对 : 时 梁 兰 
责任 印 制 : 宋 林 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www. tup. com. cn, http://www. wqbook. com 
地 ” 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969 ，cservice@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015, zhiliang@tup. tsinghua. edu. cn 
课件 下 载 : http://www. tup. com. cn,010-62795954 
: 清华 大 学 印刷 厂 
: 全 国 新 华 书店 
: 185mmX 260mm 印 张 : 13.5 字 数 : 311 千 字 
: 2017 年 2 月 第 1 版 印 ”次 : 2017 年 2 月 第 1 次 印刷 
1~2000 
30.00 元 


字 沁 尝 坟 避 员 





产品 编号 : 070801-01 


《21 世纪 计算 机 科学 与 技术 实践 型 教程 
编辑 委员 会 





主 任 : 陈 明 
委 员 : 毛 国君 
汤 良 
高 维 东 
谢 树 烛 


策划 编辑 : 谢 琛 


白 中 英 ” 叶 新 铭 刘 淑 芬 刘 书 家 
何 炎 祥 ” 陈 永 义 ” 罗 四 维 段 友 祥 
郭 禾 姚 琳 瞧 趟 子 曹 元 大 
焦 金 生 韩 江 洪 


《21 世纪 计算 机 科学 与 技术 实践 型 教程 》 


序 


21 世纪 影响 世界 的 三 大 关键 技术 : 以 计算 机 和 网 络 为 代表 的 信息 技术 ;以 基因 工程 
为 代表 的 生命 科学 和 生物 技术 ;以 纳米 技术 为 代表 的 新 型 材料 技术 。 信 息 技 术 居 三 大 关 
键 技术 之 首 。 国 民 经 济 的 发 展 采取 信息 化 带动 现代 化 的 方针 ,要 求 在 所 有 领域 中 迅速 扒 
广 信息 技术 ,导致 需要 大 量 的 计算 机 科学 与 技术 领域 的 优秀 人 才 。 

计算 机 科学 与 技术 的 广泛 应 用 是 计算 机 学 科 发 展 的 原动力 ,计算 机 科学 是 一 门 应 用 
科学 。 因 此 ,计算 机 学 科 的 优秀 人 才 不 仅 应 具有 坚实 的 科学 理论 基础 ,而 且 更 重要 的 是 能 
将 理论 与 实践 相 结合 ,并 具有 解决 实际 问题 的 能 力 。 培 养 计 算 机 科学 与 技术 的 优秀 人 才 
是 社会 的 需要 、 国 民 经 济 发 展 的 需要 。 

制定 科学 的 教学 计划 对 于 培养 计算 机 科学 与 技术 人 才 十 分 重要 ,而 教材 的 选择 是 实 
施 教学 计划 的 一 个 重要 组 成 部 分 ,(21 世纪 计算 机 科学 与 技术 实践 型 教程 ) 主 要 考虑 了 下 
述 两 方面 。 

一 方面 ,高 等 学 校 的 计算 机 科学 与 技术 专业 的 学 生 ,在 学 习 了 基本 的 必修 课 和 部 分 选 
修 课 程 之 后 ,立刻 进行 计算 机 应 用 系统 的 软件 和 硬件 开发 与 应 用 尚 存在 一 些 困 难 ,而 (21 世 
纪 计 算 机 科学 与 技术 实践 型 教程 ) 就 是 为 了 填补 这 部 分 空白 。 将 理论 与 实际 联系 起 来 ,使 
学 生 不 仅 学 会 了 计算 机 科学 理论 ,而 且 也 学 会 应 用 这 些 理论 解决 实际 问题 。 

另 一 方面 ,计算 机 科学 与 技术 专业 的 课程 内 容 需要 经 过 实践 练习 ,才能 深刻 理解 和 掌握 。 
因此 ,本 套 教材 增强 了 实践 性 ,应 用 性 和 可 理解 性 ,并 在 体例 上 做 了 改进 一 一 使 用 案例 说 明 。 

实践 型 教学 占有 重要 的 位 置 ,不 仅 体现 了 理论 和 实践 紧密 结合 的 学 科 特 征 ,而 且 对 于 提 
高 学 生 的 综合 素质 ,培养 学 生 的 创新 精神 与 实践 能 力 有 特殊 的 作用 。 因 此 ,研究 和 所 写实 践 
型 教材 是 必需 的 ,也 是 十 分 重要 的 任务 。 优 秀 的 教材 是 保证 高 水 平 教学 的 重要 因素 ,选择 水 
平 高 .内 容 新 ,实践 性 强 的 教材 可 以 促进 课堂 教学 质量 的 快速 提升 。 在 教学 中 ,应 用 实践 型 
教材 可 以 增强 学 生 的 认 知 能 力 、 创 新 能 力 、 实 践 能 力 以 及 团队 协作 和 交流 表达 能 力 。 

实践 型 教材 应 由 教学 经 验 丰 富 、 实 际 应 用 经 验 丰富 的 教师 撰写 。 此 系列 教材 的 作者 
不 但 从 事 多 年 的 计算 机 教学 ,而 且 参 加 并 完成 了 多 项 计算 机 类 的 科研 项 目 , 他 们 把 积累 的 
经 验 、 知 识 、 智 慧 . 素 质 融合 于 教材 中 ,奉献 给 计算 机 科学 与 技术 的 教学 。 

我 们 在 组 织 本 系列 教材 过 程 中 ,虽然 经 过 了 详细 的 思考 和 讨论 ,但 毕 竞 是 初步 的 尝 
试 ,不 完善 甚至 缺陷 不 可 各 免 , 敬 请 读者 指正 。 


本 系列 教材 主编 ” 陈 明 
2005 年 1 月 于 北京 
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在 如 今 这 个 互联 网 飞速 发 展 的 时 代 , 网络 已 经 成 为 人 们 生活 中 不 可 或 缺 的 一 部 分 。 
同时 网 站 的 建设 也 开始 被 众多 的 企 事业 单位 所 重视 ,这 就 为 网 页 设计 人 员 提 供 了 很 大 的 
发 展 空间 ;而 作为 从 事 相关 工作 的 人 员 则 要 掌握 必要 的 知识 体系 和 操作 技能 ,以 满足 工作 
的 需要 。 

作为 目前 流行 的 网 页 设计 软件 一 一 网 页 三 剑客 Dreamweaver、Fireworks 和 Flash, 任 借 
着 其 强大 的 功能 和 易学 易 用 的 特性 深 受 广大 设计 人 员 的 喜爱 。 其 中 Dreamweaver 自问 世 以 
来 就 一 直 备 受 广大 网 页 制作 人 员 的 推崇 ,而 Flash 强大 的 动画 处 理 功能 是 广大 设计 人 员 有 
目 共 暑 的 ,至 于 Fireworks 更 是 专门 用 来 制作 与 处 理 Web 图 形 图 像 的 首选 软件 。 这 三 者 的 
有 效 结合 ,对 于 网 页 设计 人 员 来 讲 , 将 会 很 轻松 地 完成 各 类 页 面 的 设计 和 制作 。 

虽然 制作 一 个 简单 的 网 页 并 不 困难 ,但 是 制作 出 超凡 脱俗 的 网 站 就 不 那么 容易 了 , 因 
此 我 们 特意 为 大 家 编写 了 网 站 建设 和 网 页 设计 与 制作 的 教程 。 

全 书 共 分 为 11 章 。 前 7 章 讲 解 Dreamweaver 的 基础 知识 和 基本 操作 ,语言 通俗 易 懂 ， 
即使 是 初学 者 也 很 容易 读 懂 并 学 会 。 第 8 章 讲解 了 Flash 动画 制作 基础 。 第 9 章 介 绍 了 
Fireworks 处 理 Web 图 形 基础 。 第 10 章 简 单 介绍 动态 网 页 制作 基础 。 此 外 ,为 了 使 读者 能 
巩固 所 学 知识 ,全 书 每 章 后 面 都 有 相应 的 实 训 练习 。 第 11 章 详细 介绍 了 一 个 综合 网 站 的 制 
作 过 程 ,内 容 精 彩 、 页 面 丰富 ,是 读者 在 学 会 了 基础 知识 之 后 ,对 知识 进行 巩固 的 部 分 。 

本 书 专 业 性 和 艺术 性 较 强 ,具有 很 强 的 可 读 性 ,实例 精美 实用 ,具有 良好 的 可 操作 性 。 
书 中 的 实例 是 作者 从 实际 工作 中 精 选 出 来 的 ,具有 较 强 的 应 用 性 和 示范 作用 。 同 时 , 书 中 
所 用 语言 浅显 易 懂 ,并 辅 之 以 精 选 的 插图 ,相信 读者 只 要 按照 书 中 的 步骤 进行 操作 ,一 定 
能 制作 出 令 人 满意 的 网 页 来 。 

本 书 由 正德 职业 技术 学 院 的 多 位 资深 教师 共同 编写 ,编者 多 年 从 事 计算 机 网 络 技术 
专业 的 教学 工作 ,参与 编写 工作 的 教师 有 施 莹 、 茹 志和 鹃 、 徐 建华 。 

在 编写 本 书 的 过 程 中 作者 参考 了 许多 书刊 和 文献 资料 ,在 实际 操作 方面 也 融入 了 作 
者 的 体会 和 经 验 。 本 书 力求 图 文 并茂 ,做 到 理论 以 够 用 为 度 , 实 用 性 为 主 , 紧 跟 Web 开发 
技术 的 最 新 发 展 。 但 是 ,由 于 本 书 编写 时 间 紧 , 且 限 于 作者 的 学 识 水 平 ,难免 有 不 到 之 处 ， 
恩 请 读者 给 予 批评 指正 ,也 可 与 shiying@zdonline. org 联系 。 
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第 1 章 网 页 制作 基础 知识 


1.1 网 页 及 其 制作 工具 





互联 网 的 迅速 发 展 ,使 得 网 络 成 为 目前 社会 中 最 具有 时 效 性 ,也 是 最 丰富 的 媒体 。 越 
来 越 多 的 人 得 益 于 网 络 的 发 展 和 壮大 ,每 天 无 数 的 信息 在 网 络 上 传播 ,人 们 在 其 中 币 律 搜 
索 , 各 得 其 乐 。 而 形态 各 异 、 内 容 繁 杂 的 网 页 就 是 这 些 信息 的 载体 ,那么 网 页 究竟 是 什 
么 呢 ? 


1.1.1 网 页 的 定义 


最 初 的 网 页 是 文本 的 页 面 ,是 一 种 介绍 知识 ,提供 信 息 的 平台 。 这 个 时 候 , 网 页 都 是 
文字 ,只 有 简单 的 内 容 填充 ,然后 用 HTML 代码 显示 出 来 就 算是 一 个 很 好 的 网 页 了 。 
图 1-1 显 示 了 雅虎 (Yahoo) 网 站 1996 年 时 的 样子 ,此 时 的 要 求 不 高 ,只 需要 把 要 表达 的 内 
容 能 够 显示 到 网 页 上 就 可 以 了 。 随 着 社会 的 进步 ,大 家 开始 注重 上 网 观看 的 感觉 ,要 美 
观 、 要 大 方 。 因 此 ,真正 的 网 页 时 代 开 始 了 ! 


SYNoOlN 2s 











图 1-1 早期 的 网 页 
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那 究 竞 什么 才 是 网 页 ? 

简单 来 讲 , 当 浏览 者 打开 浏览 器 输入 一 个 网 址 或 者 单 击 了 某 个 链接 ,在 浏览 器 里 看 到 
文字 、 图 片 ,可 能 还 有 动画 、 音 频 、 视 频 等 内 容 , 而 承载 这 些 内 容 的 就 是 网 页 ,图 1-2 就 是 一 
个 网 页 。 





v ® 个 
BO = SEE 9 vw 


| 


JP SEE J/) 划 如 六 迷 籽 折 更 ~ 
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图 1-2 网 页 在 浏览 器 中 的 效果 


网 页 实际 是 一 个 文件 , 它 存放 在 世界 某 个 角落 的 某 一 台 计 算 机 中 ,而 这 台 计算 机 必须 
是 联网 的 。 网 页 经 由 网 址 来 识别 与 存 取 , 当 在 浏览 器 中 输入 网 址 后 ,经 过 一 段 复杂 而 又 快 
速 的 域名 解析 程序 ,网 页 文件 会 被 传送 到 浏览 者 的 计算 机 ,然后 再 通过 浏览 器 解释 网 页 的 
内 容 , 最 终 展 示 到 浏览 者 的 眼前 。 

由 于 网 页 中 包含 “ 超 链接 ”, 超 链接 可 以 将 一 个 网 页 链接 到 其 他 网 页 ,从 而 构成 了 万 维 
网 的 纵横 交织 的 结构 。 通 过 超 链接 连接 起 来 的 一 系列 逻辑 上 可 以 视 为 一 个 整体 的 一 些 网 
页 就 叫 作 网 站 。 或 者 说 ,网 站 就 是 一 个 链接 的 页 面 集合 ,通常 为 了 完成 某 个 特定 目标 ,是 
各 种 各 样 内 容 网 页 的 集合 ,有 的 网 站 内 容 很 多 ,比如 新 浪 、 网 易 这 样 的 门户 网 站 ,有 的 网 站 
可 能 只 有 几 个 页 面 ,如 小 型 的 公司 网 站 ,但 是 它们 都 是 由 最 基本 的 网 页 组 合 起 来 的 。 

在 这 些 网 页 中 ,有 一 个 特殊 的 页 面 , 它 是 浏览 者 输入 某 网 站 域名 后 看 到 的 第 一 个 页 
面 ,因此 这 个 页 面 有 了 一 个 专用 的 名 称 一 一 主页 (Homepage) ,也 称 为 首页”。 图 1-2 就 
是 腾讯 网 的 首页 。 网 站 都 有 一 个 首页 ,或 者 说 主页 ,作为 网 站 的 开始 点 。 首 页 的 作用 一 般 
像 是 一 本 书 的 目录 ,使 访问 者 能 够 了 解 网 站 的 内 容 。 首 页 的 名 称 一 般 是 固定 的 ,例如 
index. html 或 default. html 等 (具体 名 称 由 Web 服务 器 确定 ) 。 
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1.1.2 网 页 的 本 质 


浏览 者 是 通过 浏览 器 来 访问 Web 服务 器 上 的 网 页 的 。 网 页 虽然 看 上 去 千姿百态 ,但 
是 就 其 本 质 都 是 由 HTML 语言 组 成 的 。 那 么 ,网 页 的 本 质 到 底 是 什么 呢 ? 如 果 在 浏览 
器 窗口 中 任意 打开 一 个 网 页 ,然后 选择 “查看 ”菜单 中 的 “ 源 文件 "命令 , 则 系统 会 启动 文本 
编辑 器 程序 ,其 中 包含 一 些 文本 信息 ,如 图 1-3 所 示 。 


关 contacthtml -记事 本 

文件 月” 握 潮 (E) 格式 IO) 喜 看 MV 吉 动 (HM) 

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTIL 1.0 Transitional//EN” 

“http: //wm. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> 

《html xmlns="http://wm. w3. org/1999/xzhtml "> 

《head> 

《meta http-equiv= “Content-Type” content="text/html, charset=gb2312” /> 
《itle) 通 各 村 title》 

让 type= text/css “> 


bag 
font-family: Tahoma “宋体 ; 











main [ 
width: 760px; 
margin:0 auto; 
text-align: cen 
border: lpx 3 #333333; 


] 
#tb{ 


margin:0 auto; 
text-align: center; 


] 

table th, td [ 
border: lpx solid #666666; 
border-collapse: collapse; 
padding:5px; 





</style> 
《script src="assets/jquery. js”></script> 
《script src= “assets/5. js )《/script》 


人 

《form id forml” name="forml” method-“post” action=""> 
姓名，《input type="text” name="username”id="usernane” /》 
email: 《input type="text” name="email” id-”email” /> 














图 1-3 网 页 的 HTML 源 代码 


这 些 文本 实际 就 是 网 页 的 本 质 一 -HTML 源 代码 。 由 此 可 以 看 出 ,网 页 就 是 用 
HTML 写成 的 文档 ,在 Internet 中 可 以 通过 浏览 器 程序 进行 浏览 。 

HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 表示 网 页 的 一 种 规范 , 它 
通过 标签 (也 称 为 标记 符 ) 定 义 了 网 页 内 容 的 显示 。 例 如 ,二 html 二 标签 表示 此 文档 是 一 
个 网 页 文件 ,而 之 table 二 标签 则 表示 网 页 中 定义 的 一 个 表格 。 要 浏览 一 个 网 页 ,应 先 把 
页 面 所 对 应 的 文件 从 提供 这 个 文件 的 服务 器 里 ,通过 Internet 传送 到 浏览 器 的 计算 机 中 ， 
文件 中 除 包含 了 文字 信息 外 ,还 包括 了 一 些 具体 的 链接 ,这 些 包 含 链接 的 文件 称 为 “ 超 文 
本 文件 ”。 

网 页 由 网 址 (URL) 来 识别 和 存 取 , 当 浏 览 者 在 浏览 器 内 输入 网 址 后 ,经 过 一 段 复杂 
而 又 快速 的 程序 ,网 页 文件 会 被 传送 到 浏览 者 的 计算 机 内 ,然后 浏览 器 把 这 些 HTML 代 
码 “ 翻 译 ? 成 图 文 并 茂 的 网 页 。 
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1 网 页 的 基本 构成 元 素 


虽然 网 页 的 形式 和 内 容 各 不 相同 ,但 是 组 成 网 页 的 基本 元 素 是 大 体 相同 的 ,一 般 包括 
以 下 几 点 ,如 图 1-4 所 示 。 















可 ys ee 


再 二 
3 白 和 二 和 这 A 且 中 国外 新 “ 损 上” 仙人 实则 手 00 乐 0% 
ee 全 机 新 APP 和 二 肌 。 洲 
人 HE 
60 人 于 无 人 生还 天。 中国 下 是 "福全 二 " 了 
name MP 0 
有 i ONF KROL CF 
于。 村 到 人 请 失掉 吕 


《 QQ 邮 箭 去 只 电脑 证 软件 










重点 计 员 传 过 书 ，“ 拆 是 农民 的 儿子 ”成 高 晤 词 
避 朱 芝 老人 地 T 研 扶 1 年 后 才 找 到 己 习 考 

二 山东 类 二 村 和 单 水 库 难 六 上 现 “ 生 二 区 抱 # 国 机 入 天 声 姑 和 由 新 生肖 而 
要 承 ] “小 三 ”哲理 央 生子 与 丈夫 有 的 ， :7 党 胃 休 寻根 针 届 革 女子 禄 风 第 线 和 是 们 了 | 


* 灾区 黄山 出 果 田 现 记 型 八 外 图 娱乐 。 嫩 入 处 女 作 潭 失 周 第 屿 逢 蜂 星 李 社 务 外 
全 组 图 :99 式 王城 坦克 队 车 战士 江 潮 中 奋力 救 所 上 玉 世 多 尝 回 55 炮 条 金 秀 贰 可 件 林志玲 素 配 起 床 | 


黄 捍 ， 反 徘 分 子 用 天 人 机 疝 监 全 运 条 三 式 吕 下 时 间 生 活 | 盘点 入 类 古 茜 名 括 最 牛 司机 线 生 山路 
斯 时 统 信 起 首 访 中 国 回击 西方 太吉 两 四 省 上 损 关 得/ 只 小 免 找到 著 才 正 外 竺 级 的 全 机 械 手 


图 1-4 网 页 的 基本 构成 元 素 








(1) 文字 和 图 片 : 是 网 页 的 基本 元 素 ,最 朴素 的 网 页 也 需要 有 文字 或 图 片 来 表达 它 
的 内 容 。 

(2) 超 链接 : 又 分 为 “文字 链接 ”和 “图 片 链接 ”, 只 要 浏览 者 用 鼠标 单 击 带 链接 的 文 
字 或 图 片 ,就 可 以 自动 链接 上 对 应 的 其 他 文件 ,这 样 才 让 浩如烟海 的 网 页 能 连接 成 一 个 整 
体 ,这 也 正 是 网 络 的 魅力 所 在 。 

(3) 动 效 : 现在 的 网 站 中 ,交互 设计 的 细节 和 动 效 越 来 越 丰富 ,动画 以 其 独特 的 魅力 
愉悦 了 我 们 的 感官 体验 。 动 效 又 分 为 两 种 ,一 种 是 传统 意义 上 的 动画 , 即 GIF 动画 或 
Flash 动画 , 另 一 种 则 是 网 页 交互 特效 ,通过 用 户 特 定 的 手势 .动作 ,实现 动态 的 人 机 交互 
桂 效 。 活 动 的 内 容 总 比 静 止 的 要 吸引 人 的 注意 力 , 所 以 精彩 的 动画 特效 让 网 页 变 得 更 加 
魅力 四 射 。 

(4) 表单 : 是 一 种 可 以 在 浏览 者 与 服务 器 之 间 进 行 信息 “交流 ”的 东西 ,使 用 表单 可 
以 完成 搜索 .登录 ,论坛 .发送 电子 邮件 等 交互 功能 。 

(5) 音 / 视 频 : 随 着 网 络 技术 的 发 展 ,网 站 上 面 已 经 不 再 是 单调 的 MIDI 背景 音乐 ,而 
丰富 多 彩 的 在 线 视频 、 网 络 电 视 ,播客 等 已 经 开始 成 为 网 络 新 潮流 。 

2. 与 网 页 有 关 的 一 些 术 语 

(1) 统一 资源 定位 器 一 一 URL。URL(Uniform Resource Location) 即 统一 资源 定位 
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器 , 它 指出 了 文件 在 Internet 中 的 位 置 。URL 由 协议 名 、Web 服务 器 地 址 、 文 件 在 服务 器 
中 的 路 径 ( 即 目录 ) 和 文件 名 上 部 分 构成 。 例 如 , http: //www. qq. com/news/index. 
html。 其 中 http: // 是 协议 名 ,表示 文件 的 运行 是 遵循 超 文 本 传输 协议 的 。www. qq. 
com 是 Web 服务 器 的 地 址 ,/news 是 文件 所 在 的 目录 ,index. html 则 是 文件 名 。 

(2) 超 文本 标语 语言 一 HTML。HTML(HyperText Markup Language) 即 超 文本 
标记 语言 , 它 是 一 种 用 于 编写 超 文本 文档 的 标记 语言 。 自 从 1990 年 首次 应 用 于 网 页 编辑 
后 ,HTML 迅速 崛起 成 为 网 页 编辑 的 主流 语言 。 几 乎 所 有 的 网 页 都 是 由 HTML 或 以 其 
他 程序 语言 嵌 套 在 HTML 中 编写 的 。HTML 并 不 是 一 种 程序 语言 而 是 一 种 结构 语言 ， 
它 具 有 平台 无 关 性 。 无 论 用 户 使 用 何 种 操作 系统 (Windows、Linux、Mac、UNIX 等 ) ,只 
要 有 相应 的 浏览 器 程序 ,就 可 以 运行 HTML 文档 。 

(3) 超 文本 传输 协议 一 一 HTTP。 超 文本 传输 协议 规定 了 浏览 器 在 运行 HTML 文 
档 时 所 遵循 的 规则 和 要 进行 的 操作 。HTTP 协议 的 制定 使 浏览 器 在 运行 超 文 本 文档 时 
有 了 统一 的 规则 和 标准 ,从 而 大 大 增强 了 网 页 的 适用 性 。 

(4) 超 链接 : 不 同 信息 片 之 间 的 连接 。 

(5) 服务 器 : 存放 网 站 的 主机 ,是 网 络 环境 中 的 高 性 能 计算 机 , 它 侦 听 网 络 上 其 他 计 
算 机 (客户 机 ) 提 交 的 服务 请 求 , 并 提供 相应 的 服务 。 

(6) 浏览 器 : 一 种 用 于 搜索 ,查找 ,查看 和 管理 网 络 信息 的 带 图 形 交 互 式 界面 的 应 用 
软件 。 当 前 流行 的 浏览 器 有 : 微软 的 正 (JInternet Explorer) 火狐 浏览 器 Firefox 与 
Opera 等 。 

(7) 静态 网 页 : 所 谓 静 态 网 页 ,就 是 说 该 网 页 文件 里 没有 程序 代码 ,只 有 HTML 标 
记 , 这 种 网 页 一 般 以 后 缀 . htm 或 . html 存放 。 静 态 网 页 一 经 生成 ,内 容 就 不 会 再 变化 ,不 
管 何 时 何人 访问 ,显示 的 都 是 一 样 的 内 容 ,如 果 要 修改 相关 内 容 , 就 必须 修改 源 代码 ,然后 
上 传 到 服务 器 。 

(8) 动态 网 页 : 所 谓 动态 网 页 是 指 采 用 了 动态 网 站 技术 且 可 交互 的 网 页 ,就 是 说 该 
网 页 文件 里 有 程序 代码 ,这 种 网 页 的 扩展 名 一 般 根据 不 同 的 程序 设计 语言 而 不 同 ,通常 可 
以 是 aspx\asp\php cgi。 动态 网 页 能 够 根据 不 同时 间 、 不 同 的 来 访 者 而 显示 不 同 的 内 容 。 
如 常见 的 BBS、 留 言 板 、 聊 天 室 通 常 是 用 动态 网 页 实现 的 。 


1.1.3 常用 的 网 页 制作 软件 
1. 网 页 编辑 工具 


(1) Dreamweaver 

Adobe Dreamweaver 简称 DW, 是 美国 Macromedia 公司 开发 的 集 网 页 制作 和 管理 
网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 ,DW 是 第 一 套 针对 专业 网 页 设计 师 特别 发 展 的 
视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 
充满 动感 的 网 页 。 它 具有 可 视 化 编辑 界面 ,用 户 不 必 编 写 复杂 的 HTML 源 代码 就 可 以 
生成 跨 平台 、 跨 浏览 器 的 网 页 ,不仅 适合 于 专业 网 页 编辑 人 员 的 需要 ,同时 也 容易 被 业余 
网 友 们 所 掌握 。 另 外 ,Dreamweaver 的 网 页 动态 效果 与 网 页 排版 功能 都 比 一 般 的 软件 好 
用 ,即使 是 初学 者 也 能 制作 出 相当 于 专业 水 准 的 网 页 ,所 以 Dreamweaver 是 网 页 设计 者 
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的 首选 工具 。Dreamweaver 是 一 种 可 以 满足 多 层次 需求 、 功 能 强大 的 可 视 化 专业 级 网 页 
设计 及 制作 工具 。 

(2) FrontPage 

FrontPage 是 由 Microsoft 公司 推出 的 Web 网 页 制作 工具 。FrontPage 使 网 页 制作 
者 能 够 更 加 方便 ,快捷 地 创建 和 发 布 网 页 ,具有 直观 的 网 页 制作 和 管理 方法 ,简化 了 大 量 
王 作 ， 

FrontPage 界面 与 Word、PowerPoint 等 软件 的 界面 极为 相似 ,为 使 用 者 带 来 了 极 大 
的 方便 ,Microsoft 公司 将 FrontPage 封装 入 Office 之 中 ,成 为 Office 家 族 的 一 员 ,使 之 功 
能 更 为 强大 。 

2. 素材 处 理 与 创作 工具 

为 了 使 制作 的 网 页 更 为 美观 ,用 户 在 利用 网 页 制作 工具 制作 网 页 时 ,还 需 利 用 网 页 美 
化 工具 对 网 页 进行 美化 。 

(1) Photoshop 

Adobe Photoshop 简称 PS ,是 由 Adobe Systems 开发 和 发 行 的 图 像 处 理 软件 。 

Photoshop 主要 处 理 以 像素 所 构成 的 数字 图 像 。 使 用 其 众多 的 编 修 与 绘图 工具 ,可 
以 有 效 地 进行 图 片 编辑 工作 。PS 有 很 多 功能 ,在 图 像 . 图 形 、 文 字 、 视 频 、 出 版 等 各 方面 都 
有 涉及 。Photoshop 是 目前 公认 的 PC 上 最 好 的 通用 平面 美术 设计 软件 , 它 功能 完善 ,性 
能 稳定 ,使 用 方便 ,所 以 在 几乎 所 有 的 广告 、 出 版 ,软件 公司 ,Photoshop 都 是 首选 的 平面 
制作 工具 。 

(2) Fireworks 

Fireworks 是 Adobe 推出 的 一 款 网 页 作 图 软件 , 它 可 以 加 速 Web 设计 与 开发 ,是 一 
款 创建 与 优化 Web 图 像 和 快速 构建 网 站 与 Web 界面 原型 的 理想 工具 。Fireworks 不 仅 
具备 编辑 矢量 图 形 与 位 图 图 像 的 灵活 性 ,还 提供 了 一 个 预先 构建 资源 的 公用 库 , 并 可 与 
Adobe Photoshop、Adobe Illustrator、 Adobe Dreamweaver 和 Adobe Flash 软件 省 时 集 
成 。 它 的 出 现 使 Web 作 图 发 生 了 革命 性 的 变化 。 因 为 Fireworks 是 第 一 套 专门 为 制作 
网 页 图 形 而 设计 的 软件 ,同时 也 是 专业 的 网 页 图 形 设计 及 制作 的 解决 方案 。 

作为 一 款 为 网 络 设计 而 开发 的 图 像 处 理 软件 ,Fireworks 还 能 够 自动 切割 图 像 ,生成 
光标 动态 感应 的 JavaScript 程序 等 ,而 且 Fireworks 具有 强大 的 动画 功能 和 一 个 相当 完 
美的 网 络 图 像 生成 器 。 

(3) Flash 

Flash 又 被 称 为 办 客 ,是 由 Macromedia 公司 推出 的 交互 式 矢 量 图 和 Web 动画 的 标 
准 , 由 Adobe 公司 收购 。 网 页 设计 者 使 用 Flash 可 以 创作 出 既 漂亮 又 可 改变 尺寸 的 导航 
界面 以 及 其 他 奇特 的 效果 。Flash 是 一 种 交互 式 动画 设计 工具 ,用 它 可 以 将 音乐 ,声效 、 
动画 以 及 富有 新 意 的 界面 融合 在 一 起 ,以 制作 出 高 品质 的 网 页 动态 效果 。 它 主要 应 用 于 
网 页 设计 和 多 媒体 创作 等 领域 ,功能 十 分 强大 和 独特 ,已 成 为 交互 式 矢量 动画 的 标准 ,在 
网 上 非常 流行 。Flash 广泛 应 用 于 网 页 动画 制作 、 教 学 动画 演示 、 网 上 购物 \ 在 线 游戏 等 
的 制作 中 。 

Flash 通常 也 指 Macromedia Flash Player( 现 Adobe Flash Player) 。 
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1.2 网 站 设计 流程 





因为 网 页 只 有 在 链接 成 网 站 才 有 其 存在 的 意义 ,所 以 通常 所 说 的 网 页 制作 实际 上 就 
是 网 站 制作 。 在 制作 网 页 开始 时 就 从 一 个 网 站 的 角度 来 考虑 问题 ,能 够 使 后 续 的 工作 更 
容易 进行 。 网 站 的 建设 通常 都 遵循 一 个 基本 的 流程 : 规划 阶段 ,设计 阶段 ,开发 阶段 ,发 
布 阶段 与 维护 阶段 。 


1.2.1 规划 站 点 


无 论 是 大 的 门户 网 站 还 是 只 有 几 个 页 面 的 个 人 主页 ,都 需要 做 好 前 期 的 策划 工作 , 特 
别 是 当 客户 本 身 对 于 网 站 的 需求 不 明确 的 时 候 , 承 接 网 站 制作 的 一 方 更 要 做 好 充分 的 前 
期 策划 工作 。 

网 站 虽然 看 起 来 是 一 些 电 子 文件 ,但 是 这 些 文件 同 网 站 的 功能 以 至 于 服务 器 的 操作 
系统 都 有 着 密切 的 关系 。 制 作 方 应 与 客户 共同 讨论 以 明确 网 站 主题 ,栏目 设置 .整体 风 
格 . 所 需要 的 功能 及 实现 的 方法 ,甚至 于 域名 的 申请 .虚拟 主机 或 服务 器 的 购买 .开发 制作 
的 周期 以 及 后 期 的 维护 等 细节 及 报价 ,是 制作 一 个 网 站 的 良好 开端 。 

一 个 规范 的 网 站 策划 步骤 分 为 ， 

1. 确定 网 站 的 目标 

主页 的 设计 需要 一 些 技术 ,而 更 多 的 是 对 整个 网 络 的 了 解 ,有 时 候 即 使 投入 了 非常 大 
的 精力 ,但 也 可 能 只 是 获得 了 失败 ,这 就 是 现在 许多 非常 优秀 的 个 人 主页 还 默默 无 闻 的 道 
理 。 所 以 在 最 初 设计 自己 的 站 点 的 时 候 , 就 要 有 一 个 正确 的 定位 ,使 得 它 产生 更 多 吸引 
力 ,而 这 又 是 提高 访问 量 的 关键 ,不 好 的 站 点 ,没有 人 会 喜欢 。 当 设计 者 在 开始 动手 设计 
自己 站 点 的 时 候 ,请 先 仔细 考虑 以 下 问题 : 

(1) 这 个 网 站 想 让 别人 得 到 什么 ? 

(2) 哪些 人 应 该 是 这 个 网 站 的 访客 ? 

(3) 靠 什 么 留 住 访客 ? 

2. 确定 网 站 的 主题 
网 站 设计 开始 首先 遇 到 的 问题 就 是 网 站 的 主题 ,也 就 是 网 站 的 题材 。 网 站 题材 千 奇 
百 怪 ,琳琅 满目 ,只 要 想 的 到 ,就 可 以 把 它 制 作出 来 。 
网 站 的 主题 就 是 指 网 站 的 题材 。 网 站 的 题材 包括 很 多 , 可 以 有 新 闻 、 财 经 ,娱乐 、 女 
性 、 房 产 .旅游 ,游戏 ,军事 ,体育 ,交友 、 科 技 、 音 乐 、 育 儿 、 家 居 , 证 券 、 基 金 和 计算 机 技术 
等 。 而且, 其 中 的 每 一 个 题材 都 可 以 进行 进一步 的 细 分 。 在 网 站 浩如烟海 的 今天 ,新 颖 的 
网 站 主题 层出不穷 ,要 想 在 网 站 题材 上 吸引 访问 者 ,确实 需要 下 一 番 工 夫 。 一 般 来 说 , 确 
立 网 站 题材 要 遵循 下 面 一 些 原则 。 

首先 ,就 个 人 网 站 而 言 , 要 选择 自己 感 兴趣 或 自己 熟悉 和 了 解 的 题材 。 对 于 企业 网 站 
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来 说 ,网 站 的 题材 不 能 脱离 企业 的 商业 目的 ,要 根据 网 站 的 功能 确定 网 站 的 主题 。 另 外 ， 
网 站 题材 范围 不 能 太 广泛 ,必须 做 到 “小 而 精 ”。“ 小 而 精 ” 指 网 站 的 专业 性 程度 。 

3。 确定 网 站 的 风格 

风格 (Style) 是 抽象 的 ,是 指 站 点 的 整体 形象 给 浏览 者 的 综合 感受 。 这 个 “整体 形象 ” 
包括 站 点 的 标志 、 色 彩 .版面 布 局 ,浏览 方式 交互 性 \ 内 容 价值 .站 点 荣誉 等 诸多 因素 。 例 
如 ,人 们 觉得 网 易 是 平易 近 人 的 ,迪士尼 是 生动 活泼 的 ,IBM 是 专业 严肃 的 ,这 些 都 是 网 
站 给 人 们 留 下 的 不 同感 受 。 

风格 是 独特 的 ,是 站 点 不 同 于 其 他 网 站 的 地 方 。 或 者 色彩 ,或 者 技术 ,或 者 是 交互 方 
式 ,能 让 浏览 者 明确 分 辨 出 这 是 某 个 网 站 独 有 的 。 例 如 ,新 世纪 网 络 的 黑白 色 ,网易 壁 纸 
站 的 特有 框架 ,即使 浏览 者 没有 看 到 主页 ,只 看 到 其 中 一 页 ,也 可 以 分 辨 出 是 哪个 网 站 的 。 

风格 是 有 人 性 的 。 通 过 网 站 的 外 表 、 内 容 、 文 字 、 交 流 可 以 概括 出 一 个 站 点 的 个 性 , 情 
绪 。 是 温文 颂 雅 .是 执著 热情 、 是 活泼 易 变 , 或 是 放任 不 虎 。 像 诗词 中 的 “豪放 派 " 和 “婉约 
派 ”可 以 用 人 的 性 格 来 比喻 站 点 。 

4. 确定 网 站 的 标准 

Web 标准 , 即 网 站 标准 。 目前 通常 所 说 的 Web 标准 一 般 指 网 站 建设 采用 基于 
XHTML 语言 的 网 站 设计 语言 ,Web 标准 中 典型 的 应 用 模式 是 CSS 十 Div。 实 际 上 , Web 
际 准 并 不 是 某 一 个 标准 ,而 是 一 系 列 标准 的 集合 ， 

网 页 主要 由 三 部 分 组 成 : 结构 (Structure) 表现 (Presentation) 和 行为 (Behavior) 。 
对 应 的 网 站 标准 也 分 三 方面 : 结构 化 标准 语言 ,主要 包括 HTML/XHTML 和 XML; 表 
现 标准 语言 主要 包括 CSS; 行 为 标准 主要 包括 对 象 模 型 W3C DOM、ECMAScript 等 。 这 
些 标准 大 部 分 由 W3C 组 织 起 草 和 发 布 ,也 有 一 些 是 其 他 标准 组 织 制定 的 标准 ,例如 
ECMA(European Computer Manufacturers Association) 的 ECMAScript 标准 。 

















1.2.2 设计 站 点 


在 前 期 规划 案 得 到 认可 后 ,就 需要 将 项 目 细 分 化 为 两 个 部 分 进行 ,一 个 是 前 台 页 面 设 
计 制 作 ,一 个 是 后 台 程 序 及 功能 实现 。 

客户 一 般 都 是 以貌取人 ”的 ,往往 要 求 制作 方 迅速 提供 一 到 两 套 设计 图 ,而 对 于 网 站 
的 实际 功能 如 何 , 却 不 其 了 解 。 所 以 ,就 算 网 站 有 后 台 程 序 部 分 ,而 最 早 进入 到 实际 制作 
流程 的 ,往往 是 网 页 美工 设计 。 

事实 上 ,如 果 有 一 个 好 的 网 站 策划 与 分 工 ,后 台 程 序 可 以 和 美工 设计 同时 开始 ,甚至 
先 于 美工 。 

1. 页 面 美工 设计 

美工 设计 人 员 应 该 在 网 站 策划 阶段 就 同 客 户 充分 接触 ,以 了 解 客 户 对 网 站 设计 的 需 
求 及 其 个 人 品位 ,以 便 在 设计 过 程 中 一 个 基调 。 设 计 者 要 勇于 面 对 的 一 个 现实 : 无 论 多 
么 有 "思想 "和 "创意 ”的 设计 稿 如 果 得 不 到 客户 的 认可 ,也 是 废 纸 一 张 。 


T 
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一 般 会 设计 1~3 套 不 同 风格 的 设计 稿 交 由 客户 讨论 及 提出 修改 意见 ,直到 确定 了 最 
终 方案 , 则 按 需 求 说 明 设计 出 所 有 需要 的 页 面 的 设计 图 。 

2. 静态 页 面 制 作 

美工 在 设计 好 各 个 页 面 的 效果 图 后 ,就 需要 制作 成 HTML 页 面 ,以 供 后 台 程序 人 员 
将 程序 整合 。 

3 程序 开发 

程序 开发 人 员 可 以 先行 开发 功能 模块 ,然后 再 整合 到 HTML 页 面 内 ,也 可 以 用 制作 
好 的 页 面 进行 程序 开发 ,但 是 为 了 程序 能 有 很 好 的 移植 性 和 亲和力 ,还 是 推荐 先 开发 功能 
模块 ,然后 再 整合 到 页 面 的 方法 。 

名 提示 : 本 书 仅 涉及 页 面 美工 设计 与 静态 页 面 制作 方法 ,程序 开发 部 分 请 读者 参考 
动态 网 页 设计 相关 教程 。 


1.2.3 制作 网 页 


大 部 分 情况 下 ,网 页 设计 师 与 制作 人 员 需 要 实现 的 是 静态 页 面 。 静 态 页 面 看 似 简单 ， 
似乎 只 是 把 设计 图 纸 转变 为 可 在 浏览 器 里 浏览 的 页 面 。 但 是 如 何 让 页 面 和 设计 图 保持 一 
致 而 又 符合 网 络 浏览 的 习惯 ,如 何 让 页 面 既 像 图 纸 中 那样 美丽 又 有 较 快 的 速度 和 用 户 友 
好 性 ,对 于 网 站 能 留 住 更 多 的 浏览 者 是 个 很 关键 的 问题 。 

1. 手 画 图 纸 ,布局 页 面 

专业 的 页 面 美工 设计 人 员 会 使 用 平面 图 像 处 理 软件 ,首先 绘制 图 纸 ,与 平面 设计 类 
似 , 从 空白 图 纸 开 始 ,为 网 页 设计 布局 和 配色 。 美 工 首先 要 对 网 站 风格 有 一 个 整体 定位 ， 
包括 标准 字 、.LOGO、 标 准 色彩 、 广 告 语 等 。 然 后 再 根据 此 定位 分 别 做 出 首页 二 级 栏目 及 
内 容 页 的 设计 稿 。 首 页 包括 版 面 \ 色 彩 、 图 像 ,动态 效果 .图 标 等 风格 设计 ,也 包括 
banner 菜单 ,标题 版块 等 模块 设计 。 

2. 观察 图 纸 

拿 到 一 张 设计 图 ,不 要 立刻 就 用 软件 来 划分 切片 和 输出 图 片 ,应 先 观察 一 下 图 纸 , 对 
页 面 的 布局 ,配色 有 一 个 整体 的 认识 ,而 在 对 设计 图 达成 一 个 初步 的 了 解 之 后 ,就 会 对 如 
何在 HTML 页 面 里 面 布 局 有 了 规划 ,而 根据 这 个 规划 再 来 对 设计 图 进行 分 割 输出 ,以 免 
匆匆 切 分 之 后 又 发 现在 HTML 里 面 无 法 实现 或 者 效果 不 好 而 返工 。 

3. 拆 分 图 纸 

当 对 于 如 何 拆 分 图 纸 和 组 成 HTML 页 面 有 了 规划 之 后 ,就 可 以 将 图 纸 拆 分 成 需要 
的 "原料 ”以便 在 组 装 页 面 时 使 用 ,一 般 需要 从 图 纸 中 拆 分 提取 的 有 以 下 内 容 : 

(1) 分 离 颜色 ,包括 3 部 分 的 配色 : 页 面 主 辅 颜色 搭配 的 基本 配色 、 普 通 超级 链接 的 
配色 和 导航 栏 超 链接 的 配色 。 

(2) 提取 尺寸 ,按照 设计 图 纸 的 尺寸 来 搭建 网 页 才 会 符合 图 纸 上 的 设计 ,也 可 以 灵活 
把 握 。 
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(3) 分 离 背景 图 : 背景 图 可 能 是 大 面积 重复 的 图 案 , 也 可 能 就 是 一 张 图 片 ,一 般 和 内 
容 没有 关系 的 装饰 图 可 以 做 成 背景 图 。 

(4) 分 离 图 标 及 特殊 边框 ,小 图 标 和 花边 可 以 给 网 页 增添 细节 和 亮点 ,边框 在 理论 上 
讲 其 使 用 方法 和 背景 图 相似 ,有 时 也 需 单独 输出 。 

(5) 分 离 图 片 , 内 容 相关 的 图 片 , 例 如 新 闻 报道 的 图 片 . 讲 解 操作 步骤 的 图 片 等 。 

4. 组 装 

组 装 就 是 把 分 离 出 来 的 元 素 按照 一 定 的 方法 组 合成 与 设计 效果 类 似 的 页 面 。 注 意 : 
这 里 说 “类 似 ” 的 布局 ,因为 很 多 时 候 设计 图 和 实际 情况 会 有 所 差别 ,不 太 可 能 完全 一 样 。 

HTML 页 面 布局 的 方法 一 般 分 为 两 种 : 表格 布局 和 层 布局 。 

(1) 表格 布局 

表格 布局 已 经 有 很 多 年 历史 了 ,在 HTML 和 浏览 器 还 不 很 完善 的 时 候 , 要 想 让 页 面 
内 的 元 素 能 有 一 个 比较 好 的 格局 是 比较 麻烦 的 事情 ,由 于 表格 不 仅 可 以 控制 单元 格 的 宽 
度 和 高 度 ,而 且 可 以 互相 嵌 套 ,所 以 为 了 让 各 个 网 页 元 素 能 够 放 在 预 设 的 位 置 ,表格 就 成 
为 网 页 制作 者 的 得 力 工具 。 

目前 仍然 有 很 多 的 网 站 在 使 用 表格 布局 ,表格 布局 使 用 简单 ,制作 者 只 要 将 内 容 按 昭 
一 定 的 行 和 列 拆 分 ,然后 再 用 表格 组 装 起 来 即 可 实现 设计 版 面 布局 。 

(2) 层 布局 方法 

层 布 局 方法 使 用 层 (Div) 结 合 层 全 样式 单 (CSS) ,把 页 面 内 的 图 片 和 文字 等 内 容 组 合 
起 来 ,成 为 可 浏览 的 页 面 。 层 称 为 定位 标记 , 它 不 像 链接 或 者 表格 具有 实际 的 意义 ,其 作 
用 就 是 设 定 文字 表格 等 摆 放 位 置 ,因此 它 可 以 用 在 几乎 任何 地 方 。 

本 书 将 在 后 继 章节 分 别 介绍 这 两 种 布局 方法 。 


1.2.4 网 站 发 布 与 维护 


一 个 网 站 制作 完成 ,下 一 步 就 是 将 制作 完成 的 网 站 从 本 地 上 传 到 Internet, 这 就 是 网 
站 发 布 。 发 布 的 方法 往往 都 是 先 在 本 地 测试 网 站 确实 没有 问题 ,然后 再 使 用 上 传 工具 将 
网 站 上 传 到 事先 申请 到 的 主页 空间 或 专业 的 服务 器 上 。 

发 布 网 站 后 就 一 劳 永 逸 了 么 ”当然 不 是 ! 与 其 他 媒体 一 样 ,网 站 也 是 一 个 媒体 ,同样 
需要 经 常 更 新 维护 。 网 站 维护 一 般 包含 以 下 内 容 : 内 容 的 更 新 、 网 站 风格 的 更 新 、 网 站 重 
要 页 面 的 设计 制作 ,网 站 系统 的 维护 服务 等 。 

其 他 的 服务 可 能 还 包括 网 站 推广 ,版 本 功能 升级 等 内 容 , 在 此 不 再 详 述 。 


本 章 实 训 
【 实 训 


任 选 一 个 网 站 作为 分 析 目 标 ,例如 "正德 职业 技术 学 院 ” 官 网 ,如 图 1-5 所 示 , 试 从 网 
站 主题 ,功能 风格、 用户 群 .信息 内 容 , 栏 目 结构 等 方面 进行 网 站 分 析 。 
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德 钱 素 技术 学 度 


【 实 训 2】 


完成 如 下 所 示 的 个 人 网 站 规划 表 , 选 一 个 感 兴趣 的 主题 ,对 整个 网 站 的 建设 进行 总 体 


规划 。 


网 站 名 称 
(一 句 话 精华 ) 





正德 职业 技术 学 院 首页 


个 人 网 站 规划 表 








主题 
(到 底 做 什么 ) 





面向 用 户 群 





总 体 风格 
(标准 色 ) 





主要 竞争 对 手 
(竞争 网 站 ) 





市 场 背景 分 析 
(国内 外 该 行业 发 展现 状 ) 





网 站 特色 
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内 容 结构 
(共有 几 个 栏目 及 各 栏目 的 主要 内 容 ) 
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Adobe Dreamweaver 简称 DW , 它 是 现在 网 页 设计 与 制作 普遍 使 用 的 一 种 工具 , 它 具 
有 可 视 化 编辑 界面 ,用 户 不 必 编 写 复杂 的 HTML 源 代 码 就 可 以 生成 跨 平台 、 跨 浏览 器 的 
网 页 ,不 仅 适合 于 专业 网 页 编辑 人 员 的 需要 ,同时 也 容易 被 业余 网 友 们 所 掌握 。 














2.1 Dreamweaver CC 简介 





2.1.1 Dreamweaver CC 的 工作 界面 


Dreamweaver CC 版 本 除了 外 观 有 所 改变 以 外 ,软件 本 身 随 着 更 新 也 添加 一 些 新 功 
能 ,让 Web 开发 人 员 能 更 快 生 成 简洁 有 效 的 代码 。 但 软件 在 结构 上 , 较 前 期 版 本 ,基本 上 
没什么 变化 。 

1，Dreamweaver CC 的 起 始 页 

Dreamweaver CC 的 起 始 页 并 不 是 只 在 第 一 次 启动 时 出 现 ,而 是 在 Dreamweaver 每 
次 启动 时 或 者 在 每 次 没有 打开 文档 时 ,都 会 在 主 窗口 中 显示 ,如 图 2-1 所 示 。 





my uy Ey 新 指 功 能 
oD 也 % M4) 各所 各 水 帮 功能 浏 旬 


HTML Css 上 SVG 功 蓄 视 频 


如 作 所 志 功 能 











| 
DP DD 





了 解 Dreamweaver 





图 2-1 起 始 页 
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在 Dreamweaver CC 的 起 始 页 中 整合 了 多 项 常用 功能 ,方便 了 用 户 较 快 使 用 其 功能 。 
主要 分 为 三 大 类 : 最 近 浏览 的 文件 : 方便 用 户 快速 找到 最 近 编辑 过 的 网 页 。 新 建 : 使 制 
作 人 员 快 速 进入 所 要 创建 的 不 同 项 目 类 型 。 了 解 : 作为 初学 者 或 有 经 验 的 开发 者 ,都 可 
在 此 类 别 中 找到 软件 的 视频 链接 与 新 功能 展示 。 

2， 界面 基本 组 成 

Dreamweaver CC 界面 与 Dreamweaver 的 前 期 版 本 相 比 , 界 面 总 体 的 格局 比较 相似 。 
此 工作 界面 仍然 为 MDI( 多 文档 ) 形 式 ,将 所 有 的 文档 窗口 及 面板 集合 到 主 窗口 中 。 
Dreamweaver CC 主 界面 如 图 2-2 所 示 。 


[DW Siun wen sa sy WaiM) BHO) ET EB | 
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于 有 是 
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ETE LERD 
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[em 髓 四 区 中] 诬 DTEEEFEFTZ 
-上风 " 加。 最 名 
本 








图 2-2 主 界 面 


主 程序 界面 大 致 分 为 以 下 几 个 区 域 : 菜单 栏 “ 插 入 ”面板 “文档 "工具 栏 文档 编辑 
区 “状态 ” 栏 “ 属 性 ”面板 和 右 侧 的 面板 组 。 

(1) 菜单 栏 

Dreamweaver CC 中 共有 10 个 菜单 ,如 图 2-3 所 示 , 分 别 为 文件"“ 编 辑 ”"“ 查 看 ”、 
“插入 ”、“ 修 改 ”“ 格 式 ”“ 命 令 ”“ 站 点 ”“ 窗 口 " 和 “帮助 "。 主 要 用 于 文件 的 管理 ,站 点 管 
理 \ 插 入 对 象 窗 口 的 设置 等 一 系列 的 操作 。 当 然 ,其 中 很 多 功能 在 其 他 面板 或 者 工具 栏 
中 也 能 找到 。 不 过 ,菜单 栏 里 的 所 有 这 些 项 目 提供 了 较为 完整 的 功能 。 


Dw 文人 8” 续 各 日 二 其 MI 修改 (M) 梅 t(0) 命 S(O 区 (S) 窜 D(W) 帮助 H) 
图 2-3 菜单 栏 
(2)“ 插 入 ”面板 
“插入 ”面板 是 整个 面板 组 中 最 常用 的 一 个 面板 ,其 中 包含 了 各 种 次 一 级 的 面板 ,以 下 
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拉 弹 出 菜单 的 方式 切换 ,如 “常用 ”插入 面板 “结构 ”插入 面板 “媒体 ”插入 面板 等 ,通过 这 
个 面板 可 以 轻松 实现 网 页 各 种 对 象 的 插入 。 

“常用 ?插入 面 板 包含 了 网 页 中 的 常见 对 象 ,如 * 层 "“ 图 像 ”“ 表 格 ” 等 , 单 击 对 应 的 按 
钮 即 可 在 文档 窗口 插入 相应 的 对 象 ,如 图 2-4 所 示 。 

“结构 ”插入 面板 集中 了 一 些 设计 网 页 结构 的 工具 ,如 “项 目 列表 ”、“ 编 号 列表 ”“ 标 
题 "等 元 素 ,如 图 2-5 所 示 。 





图 2-4 “插入 "面板 下 的 “常用 ”面板 图 2-5 “插入 "面板 下 的 “结构 ”面板 


“媒体 "插入 面板 提供 了 快速 添加 视频 音频、 动画 等 视 音 对 象 元 素 的 快捷 按钮 ,如 
图 2-6 所 示 。 

“表单 ”插入 面板 用 于 在 网 页 中 快速 添加 各 种 表单 元 素 , 如 文本 框 密码 框 按 钮 等 ,如 
图 2-7 所 示 。 





图 2-6 “插入 ”面板 下 的 “媒体 ”面板 图 2-7 “插入 ”面板 下 的 “表单 "面板 


jQuery Mobile 插入 面板 可 提供 在 手机 平板 电脑 等 移动 设备 上 的 jQuery 核心 库 支 
持 ,通过 该 面板 可 快速 在 页 面 中 添加 指定 效果 的 可 折 秋 区 块 、 翻 转 切 换 开关 、 搜 索 等 对 象 ， 
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如 图 2-8 所 示 。 
jQuery UI 插入 面板 中 提供 了 特殊 效果 的 对 象 ,通过 该 面板 可 快速 在 页 面 中 添加 具 
有 指定 效果 的 选项 卡 、 日 期 对话 框 等 对 象 ,如 图 2-9 所 示 。 





图 2-8 “搬入 "面板 下 的 jQuery Mobile 面板 图 2-9 “插入 ?面板 下 的 jQuery UI 面板 


“模板 ”插入 面板 中 提供 了 有 关 制作 模板 页 面 
的 各 种 工具 ,通过 该 面板 可 快速 执行 创建 模板 、 指 
定 可 编辑 区 等 操作 ,如 图 2-10 所 示 。 

(3) “文档” 工具 栏 

“文档 "工具 栏 中 包含 了 代码 视图 与 设计 视图 
的 切换 、 查 看 文档 及 站 点 间 传 送 文档 的 相关 命令 与 
选项 ,如 图 2-11 所 示 。 其 中 最 常用 的 是 视图 间 的 切 
换 和 文档 的 查看 。 

(4) 编辑 区 

制作 人 员 在 此 区 域 编辑 网 页 内 容 , 并 以 “所 见 即 所 得 ”的 方式 显示 被 编辑 的 网 页 内 容 。 





2-10 “插入 ”面板 下 的 “模板 ”面板 





2-11 “文档 "工具 栏 


(5)“ 状 态 " 栏 
显示 了 当前 正在 编辑 文档 的 相关 信息 。 制 作 人 员 可 以 根据 左 侧 的 标签 选择 器 非常 容 
易 地 选取 网 页 中 的 元 素 ,如 图 2-12 所 示 。 例 如 单 击 <<body> 后 ,就 可 选取 整个 网 页 。 还 
可 单 击 状态 栏 右 侧 的 设备 缩 略 图 ,快速 定义 页 面 适 配 的 尺寸 。 
图 2-12 “状态 " 栏 


(6)“ 属 性 ”面板 
用 于 显示 当前 选 定 的 网 页 元 素 的 属性 ,并 可 在 “属性 ?面板 上 进行 修改 ,如 图 2-13 所 
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示 。 当 选择 不 同 的 网 页 元 素 时 ,“ 属 性 ”面板 的 显示 内 容 也 会 有 所 不 同 ,例如 图 片 和 表格 所 
显示 的 属性 是 不 一 样 的。 此 外 , 单 击 * 属 性 ”面板 右 下 方 的 下 拉 按 钮 ,可 以 根据 使 用 的 需 
要 , 折 芋 或 展开 “属性 ”面板 。 在 这 里 建议 用 户 在 一 般 情况 下 都 设置 为 展开 模式 。 














- BI 党 后生 在 权 | 





vG 上 本 QI -| 


[TT | EEE] 





图 2-13 “属性 ”面板 


(7) 面板 组 


面板 组 是 停靠 在 窗口 右边 的 多 个 相关 面板 的 集合 。 面 板 是 被 组 织 到 面板 组 中 的 , 具 


有 浮动 的 特性 。 同 时 ,每 个 面板 都 可 以 展开 或 折 和 ,并 且 
可 以 和 其 他 面板 停靠 在 一 起 或 独立 于 面板 组 之 外 ,如 
图 2-14 所 示 。 用 户 可 以 根据 自己 的 喜好 ,将 不 同 的 浮动 面 
板 重新 组 合 ,达到 个 性 化 的 界面 设计 。 


2.1.2 定义 站 点 


1. 站 点 设计 流程 

(1) 对 要 创建 的 站 点 进行 规划 。 例 如 ,确定 建站 的 目 
的 、 规 模 , 考 虑 可 能 的 浏览 者 访问 量 的 情况 ,考虑 服务 器 端 
的 配置 和 访问 者 的 浏览 器 差异 等 。 

(2) 建立 一 个 尽量 完整 的 站 点 结构 。 无 论 是 从 提高 
工作 效率 的 目的 出 发 ,还 是 为 了 今后 维护 方便 ,建立 一 个 
完整 的 站 点 结构 都 是 非常 必要 的 。 

2， 站 点 素材 文件 类 型 

(1) 文字 资料 : 文字 在 网 页 里 始终 占据 着 一 定 的 比 
例 。 虽 然 在 Dreamweaver 里 可 以 直接 输入 文字 ,但 在 实 
际 应 用 时 ,网 页 制作 人 员 更 多 地 还 是 采用 将 现 有 的 文字 通 
过 复制 和 粘贴 的 方式 插入 网 页 。 

(2) 图 片 资料 : 图 片 是 网 页 元 素 中 的 主力 军 。 图 片 在 
网 页 中 所 起 到 的 作用 不 仅 是 对 文字 内 容 的 补充 ,更 多 的 还 
是 对 网 页 的 美化 和 点 级 。 很 多 网 页 之 所 以 被 认为 优秀 ,在 
很 大 程度 上 取决 于 版 面 的 设计 ,而 这 些 版 面 往往 都 是 由 图 
片 元 素 组 成 。 

(3) 动画 资料 : 可 以 是 GIF 动画 或 者 Flash 动画 。 








图 2-14 面板 组 


(4) 音频 资料 : 网 页 中 使 用 的 声音 资料 一 般 是 作为 网 页 的 嵌入 音频 文件 或 者 提供 用 


户 下 载 收听 的 各 类 音频 文件 。 


(5) 视频 资料 : 由 于 视频 文件 一 般 都 比较 大 ,所 以 在 网 页 上 直接 播放 的 情况 还 不 是 
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非常 普遍 ,但 是 现在 还 是 有 很 多 的 站 点 都 提供 视频 播放 的 功能 或 者 提供 用 户 下 载 的 视频 
奖 件 。 

(6) 其 他 资料 : 还 有 ActiveX 控件 ,Java Applet 等 网 页 多 媒体 动态 效果 。 

3， 站 点 结构 规划 


从 一 开始 就 要 养 成 从 网 站 整体 去 设计 网 页 。 在 建立 站 点 之 前 最 好 先 规划 站 点 结构 ， 
这 样 可 以 为 以 后 的 制作 、 维 护 和 更 新 站 点 提供 便利 。 要 建立 一 个 层次 结构 分 明 的 站 点 , 通 
常 是 在 本 地 磁盘 上 创建 一 个 文件 夹 ,这 个 文件 夹 称 为 “ 根 目录 ”, 在 这 个 文件 夹 中 存放 站 点 
中 的 所 有 资料 ,分 门 别 类 地 建立 子 文件 夹 ,管理 图 像 动画、 网 页 等 文件 。 组 织 站 点 结构 注 
意 以 下 几 个 要 点 : 

(1) 将 站 点 内 容 分 门 别 类 ,即将 相关 页 面 放置 在 同一 文件 夹 内 。 

(2) 确定 放置 图 像 , 声 音 或 其 他 多 媒体 文件 的 位 置 ,单独 放置 图 像 ,声音 等 文件 。 

(3) 对 本 地 站 点 和 远程 站 点 使 用 相同 的 结构 , 即 在 创建 并 测试 完 站 点 后 ,将 所 有 文件 
都 上 传 ,使 本 地 结构 完整 地 复制 到 远程 站 点 上 。 

例如 ,建立 规模 较 小 的 个 人 网 站 ,站 点 结构 示意 图 如 图 2-15 所 示 。 
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图 2-15 站 点 结构 示意 图 


4. Dreamweaver CC 的 站 点 管理 


在 Dreamweaver 中 可 实现 对 站 点 的 管理 ,包括 站 点 
的 新 建 、 复 制 、 编 辑 . 导 入 和 导出 等 。 站 点 结构 目录 建立 
完毕 后 ,通过 以 下 三 种 方法 来 创建 本 地 站 点 。 
(1) 在 起 始 欢迎 界面 单 击 * 站 点 设置 "按钮 。 
(2) 在 “文件 ”面板 中 单 击 “ 管 理 站 点 ” 超 链接 ,如 
2-16 所 示 , 可 在 弹出 的 管理 站 点 面板 中 执行 站 点 的 各 图 2-16 “文件 "面板 的 “管理 站 点 ” 














| 
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项 管理 ,如 “新 建站 点 ”, 或 编辑 当前 站 点 ,如 图 2-17 所 示 。 
(3) 通过 菜单 项 "站 点 "菜单 创建 。 





图 2-17 “管理 站 点 ”面板 


下 面 以 通过 “站 点 ”菜单 创建 本 地 站 点 为 例 ,讲解 具体 的 创建 方法 。 在 Dreamweaver 
CC 中 建立 本 地 站 点 的 方法 如 下 。 

(1) 选择 “站 点 ”>“ 新 建站 点 ”。 

(2) 在 打开 的 站 点 设置 对 象 对 话 框 的 “站 点 名 称 " 文 本 框 中 输入 站 点 名 称 , 单 击 “ 本 地 
站 点 文件 夹 ”文本 框 右 侧 的 “浏览 ”按钮 ,为 本 地 站 点 选择 根 文件 夹 ,此 处 的 根 目 录 路 径 尽 
量 不 要 包含 中 文 文件 夹 , 如 图 2-18 所 示 。 








2-18 “站 点 设置 对 象 "对 话 框 
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(3) 单 击 "保存 "按钮 完成 站 点 的 建立 ,此 时 * 广 
件 "面板 显示 当前 站 点 的 新 本 地 根 文件 夹 。 “文件” | ne 
面板 中 的 文件 列表 将 充当 文件 管理 器, 允许 复 市. 术 。 | 二 
贴 .删除 .移动 和 打开 文件 ,就 像 在 计算 机 桌面 上 一 
样 ,如 图 2-19 所 示 。 


2.1.3 基本 功能 简介 


1. 文件 的 基本 操作 

在 Dreamweaver CC 中 ,可 以 使 用 "文件 菜单 对 单独 的 文件 进行 管理 。 例 如 ,执行 
“新 建 "“ 打 开 ”“ 保 存 "“ 另 存 为 "等 命令 。 另 外 也 可 以 在 “文件 ?面板 中 直接 对 本 地 站 点 
中 的 文件 进行 管理 。 例 如 , 执行 “新 建 "“ 打 开 ?“ 删 除 "“ 移 动 "“ 复 制 "“ 重 命名 ”等 
命令 。 

选择 “文件 ”面板 中 对 应 文件 , 即 可 对 选取 文件 进行 编辑 操作 。 例 如 ,选择 文件 后 , 单 
击 右键 ,在 弹出 的 菜单 中 执行 “打开 ”命令 , 则 Dreamweaver CC 在 文档 窗口 中 打开 该 文 
件 , 当 然 最 简单 的 方法 是 在 “文件 ”面板 中 双击 对 应 的 文件 图 标 。 

在 对 站 点 中 的 文件 或 文件 夹 进行 操作 时 ,合理 地 使 用 右键 快捷 菜单 能 大 大 加 快 操作 
速度 。 例 如 ,在 “文件 ”面板 空白 处 上 单 击 鼠 标 右键 ,然后 选择 “新 建文 件 夹 "命令 ,可 以 在 
本 地 站 点 中 新 建 一 个 文件 夹 。 

2. 编辑 站 点 

在 Dreamweaver 中 创建 好 本 地 站 点 后 ,如 果 需 要 ,还 可 以 对 整个 站 点 (本 地 根 目录 ) 
进行 编辑 操作 。 例 如 复制 站 点 、 删 除 站 点 等 。 

如 果 需 要 编辑 站 点 ,可 以 执行 以 下 步骤 。 

(1) 单 击 “ 站 点 "菜单 ,在 下 拉 列 表 中 选择 “管理 站 点 ”命令 。 

(2) 在 对 话 框 列表 中 选择 需要 编辑 的 站 点 , 即 可 激活 左下 方 4 个 快捷 按钮 ,分 别 可 进 
行 “删除 ”“ 编 辑 "“ 复 制 ” 及 “导出 ”的 操作 ,如 图 2-20 所 示 。 

单 击 “新 建站 点 ”按钮 ,打开 “站 点 设置 对 象 ” 对 话 框 ,可 以 新 建 一 个 站 点 ; 单 击 * 删 除 ” 
按钮 ,可 以 将 站 点 文件 夹 在 Dreamweaver CC 中 清除 ; 单 击 "编辑 ”按钮 ,打开 “站 点 设置 对 
象 ”对 话 框 ,可 以 编辑 站 点 信息 ,包括 站 点 名 称 及 根 文件 夹 路 径 ; 单 击 " 复 制 "按钮 ,可 以 复 
制 一 个 被 选择 的 站 点 ; 单 击 " 导 出 ”按钮 ,可 以 将 Dreamweaver CC 中 的 站 点 导出 ,以 便 别 
的 用 户 或 者 在 别 的 计算 机 上 使 用 该 站 点 ; 单 击 * 导 入 ”按钮 ,打开 “导入 站 点 ”对 话 框 ,浏览 
到 要 导入 的 站 点 (保存 为 站 点 定义 文件 ste 文件 ) 并 将 其 选 定 可 以 导入 一 个 站 点 (在 导入 
文件 之 前 ,必须 先 从 Dreamweaver CC 中 导出 站 点 ,将 站 点 保存 为 ste 文件 ) 。 

(3) 操作 完成 后 , 单 击 “ 完 成 ”按钮 。 

3. 指定 站 点 首页 

网 站 的 门户 就 是 首页 ,通常 首页 文件 中 总 包含 有 若干 指向 其 他 主要 网 页 的 超 链接 ,可 
以 先 为 网 站 创建 一 个 空白 首页 ,然后 编辑 ,并 将 其 命名 为 index. html, 这 是 服务 器 默认 的 
首页 名 称 。 














图 2-19 “文件 ”面板 中 新 建成 的 站 点 
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图 2-20 “管理 站 点 "对 话 框 


2.1.4 基本 功能 实例 讲解 

1. 创建 静态 网 页 

执行 文件 "~* 新 建 "命令 ,出 现 "新 建文 档 "对 话 框 ,如 图 2-21 所 示 ; 选 定 " 空 自 页 "中 
的 HTML 选项 , 单 击 "创建 "按钮 ,在 文档 窗口 创建 一 个 空白 网 页 。 











EE EE EE 
EE 


入 
划一 训 





























2-21 “新 建文 档 "对 话 框 


网 站 建设 与 网 页 设计 项 目 化 教程 


2. 保存 并 命名 新 文档 


执行 文件 “保存 ”命令 ,出 现 * 另 存 为 "对 话 框 , 选 定 保存 网 页 的 文件 夹 , 在 “文件 
名 ” 框 中 输入 “index. html”, 如 图 2-22 所 示 。 
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图 2-22 “保存 ”对话 框 


3,， 打开 网 页 文件 

(1) 在 起 始 页 对 话 框 中 打开 网 页 文件 。 

(2) 在 “文件 "菜单 中 打开 网 页 文件 。 

(3) 在 “文件 ”面板 中 打开 网 页 文件 。 

“文件 ”面板 与 “Windows 资源 管理 器 "一样 ,浏览 到 需要 打开 的 网 页 文件 ,双击 该 网 
页 文件 名 即 可 调 入 到 “文档 ”窗口 ,如 图 2-23 所 示 。 

(4) 在 “Windows 资源 管理 器 ”中 打开 网 页 文件 。 

在 Windows 资源 管理 器 中 右 击 网 页 文件 名 ,在 “打开 方式 ”菜单 中 单 击 Adobe 
Dreamweaver CC, 网 页 文件 也 将 调和 “文档 ”窗口 中 。 

4. 设置 网 页 属性 

页 面 属 性 是 指 网 页 的 一 般 属性 信息 ,例如 ,网 页 标题 ` 网 页 的 背景 颜色 .背景 图 像 、 
超 链接 颜色 ,标题 编码 等 。“ 页 面 属性 ”位 于 “修改 ”菜单 中 ,也 可 在 属性 面板 找到 快捷 
按钮 。 

(1) 设置 网 页 标题 

网 页 标题 是 用 来 说 明 网 页 内 容 的 文字 ,通常 显示 在 浏览 器 窗口 的 标题 栏 中 。 每 张 网 
页 都 应 该 有 一 个 标题 ,而 网 页 标题 文字 最 好 能 够 恰如其分 地 描述 网 页 的 内 容 。 

设置 网 页 标题 的 方法 为 : 在 “文档 "工具 栏 中 的 “标题 "文本 框 内 直接 输入 网 页 的 标题 







第 2 章 ”建立 站 点 与 编辑 网 页 


NM CS 


ET 


ET TT 











图 2-23 在 “文件 ”面板 打开 网 页 文件 


文字 ,如 图 2-24 所 示 , 也 可 以 在 “页 面 属性 "对话 框 中 的 “标题 "文本 框 内 设置 网 页 的 标题 ， 
如 图 2-25 所 示 。 
显示 代码 视图 


显示 代码 视图 和 设计 视图 


显示 设计 视图 文档 标题 服务 器 调试 





预览 方式 
显示 实时 效果 模式 
2-24 “文档 "工具 栏 功能 


(2) 设置 网 页 外 观 

如 果 需 要 设置 网 页 的 其 他 属性 ,可 以 在 “页 面 属性 ”对 话 框 中 进行 设置 ,通过 它 可 以 设 
置 页 面 的 边 距 、 字 体 、 背 景 效果 等 ,设置 完成 后 单 击 * 确 定 ” 按 钮 。 

如 果 要 对 整个 网 页 的 字体 格式 和 背景 效果 进行 设置 ,可 以 通过 设置 页面 属性 ”对 话 
框 的 “外 观 (CSS)” 分 类 来 实现 ,如 图 2-26 所 示 。 


24 


网 站 建设 与 网 页 设计 项 目 化 教程 








标题 :首页 
文档 类 型 TD) 








编码 吕 ) 
Unicode 标准 化 表单 

















固 包括 Unicods 签名 Com G) 


文件 文件 夹 : D: \test\ 
让 点 文件 夫 : 了 :\test\ 





























外 观 CS5) 
页 面 字体 中): 加 默认 字体 
大 小 G) 
文本 基色 0 国 
背 果 颜色 D)- 攻 ，， 
背 凡 图 多 加) ED 
重 夏 D: 

















在 过 跑 朋 司 。 礼 和 :站 攻 国 
上 这 路) 区 可 To: 区 本 

















Co 蕊 路 蕊 到 -| Ciw- | 











图 2-26 “页 面 属性 ?对话 框 的 外观 (CSS) ”分 类 


除了 通过 “外 观 (CSS)” 分 类 设置 页 面 的 字体 和 背景 效果 以 外 ,还 可 以 通过 设置 "页 面 
属性 ”对 话 框 的 “外 观 (HTML)” 分 类 来 设置 ,如 图 2-27 所 示 。“ 外 观 (CSS)”“ 外 观 
(HTML)” 同 时 可 设置 文本 颜色 、 背 景色 或 背景 图 像 ,但 两 者 生成 的 网 页 源 代码 是 不 同 
的 ,其 中 CSS 方式 的 优先 级 更 高 。 

(3) 设置 超 链接 显示 效果 

通过 “页 面 属性 ”对 话 框 ,还 可 以 非常 方便 地 设置 超 链接 的 显示 效果 ,分 别 可 设置 字体 
风格 .字号 大 小 、 粗 细 倾 斜 效 果 、 超 链接 颜色 及 下 画 线 样式 ,如 图 2-28 所 示 。 

(4) 设置 标题 

在 网 页 中 ,有 6 种 标题 样式 ,分 别 使 用 HTML 的 <hl 之 一 <h6 之 标签 来 标记 , 对 于 
这 些 标题 ,其 样式 可 以 通过 “页 面 属性 ”对 话 框 的 “标题 (CSS)” 分 类 来 设置 ,如 图 2-29 
所 示 。 
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图 2-29 “页 面 属性 "对话 框 的 “标题 (CSS)” 分 类 


26 


网 站 建设 与 网 页 设计 项 目 化 教程 


2.2 制作 第 一 个 网 页 





2.2.1 创建 网 页 


在 “文件 ”面板 中 单 击 右键 ,在 出 现 的 快捷 菜单 中 单 击 “ 新 建文 件 ”, 可 直接 在 站 点 路 径 
下 新 建 网 页 文件 ,如 图 2-30 所 示 , 只 需 指定 网 页 的 





文件 名 即 可 ,请 特别 注意 网 页 文件 的 后 缀 名 ,静态 。 [Bweit ”RN 
网 页 的 后 组 名 为 . htm 或 . html, 动 态 网 页 的 后 级 名 。 | 下 信物 名 | 加 
根据 Web 应 用 程序 的 不 同 而 不 同 。 





双击 新 建 的 网 页 文件 , 即 在 编辑 区 打开 新 建 的 
空白 网 页 。 





2.2.2 向 页 面 添加 元 素 本 
歌 取 (G) 

在 文档 中 插入 文本 的 方法 为: 首先 在 需要 插 Ee 
入 文 本 的 区 域 单 击 鼠 标定 位 插入 点 ,然后 输入 广 we 
字 , 如 果 需 要 开始 新 的 段落 , 按 Enter 键 即 可 ;如 果 i 
想 换 行 显示 一 段 的 内 容 ,可 以 按 Shift 十 Enter 键 ; mm 
如 果 输入 的 文字 超出 一 行 的 范围 ,插入 的 文本 会 自 Ne 
动 换行 显示 。 RO- 


也 可 以 将 已 有 文件 中 的 文本 复制 到 文档 窗口 版 本 控制 
中 。 方 法 为 : 打开 要 复制 的 纯 文 本 文件 , 按 Ctrl 十 C 
键 将 文本 复制 到 剪贴 板 中 ,接着 切换 回 Dreamweaver 
CC 文档 窗口 ,在 需要 添加 文本 的 区 域 单 击 鼠 标 左 
键 ,然后 选择 “编辑 "菜单 的 “粘贴 ”命令 (或 按 Ctrl 十 
V 键 ) , 则 选中 文本 即 被 复制 到 指定 区 域 。 

除了 一 般 文本 以 外 ,如 果 需 要 在 网 页 中 插入 特 
殊 字 符 , 例 如 商标 符号 @@ .版权 符 号 @ ,英镑 符号 天 
等 ,应 该 首先 定位 光标 ,然后 单 击 “ 插 入 ”面板 中 的 ”图 2-30 在 文件 "面板 新 建 网 页 文件 
“常用 ”选项 卡 下 的 “字符 ”对 象 ,再 单 击 相 应 按钮 。 

如 果 需 要 插入 其 他 对 象 ,例如 图 像 表格 等 ,同样 应 使 用 “插入 ”面板 的 “常用 ”选项 卡 
中 的 相应 按钮 ,具体 请 见 本 书 其 他 部 分 。 


2.2.3 ”制作 网 页 的 一 般 过 程 


下 面 通过 制作 一 个 简单 的 网 页 了 解 在 Dreamweaver CC 中 创建 网 页 的 一 般 过 程 。 
(1) 启动 Dreamweaver CC, 新 建 一 个 空白 文档 窗口 ,如 果 要 制作 基于 不 同 设备 分 辨 
率 的 网 页 ,可 单 击 文档 窗口 下 方 状态 栏 中 的 设备 按钮 ,重新 定义 页 面 尺寸 。 
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(2) 在 工具 栏 "标题 "文本 框 中 输入 网 页 标题 ,可 以 使 用 有 意义 的 中 英文 作为 标题 , 例 
如 “我 的 网 页 ”。 如 果 需 要 设置 网 页 的 其 他 基本 属性 ,可 按 Ctrl+] 键 ,打开 “页 面 属性 ”对 
话 框 ,进行 必要 的 设置 。 

(3) 此 时 网 页 没有 被 保存 ,文档 窗口 标题 栏 中 显示 了 一 个 “无 标题 文档 (Untitled-1)” 
字样 , 按 Ctrl 十 S 键 ,打开 “保存 为 ”对话 框 ,将 网 页 保存 在 站 点 中 。 

(4) 在 文档 工作 区 中 输入 文字 或 通过 单 击 “ 插 入 ”面板 中 的 按钮 插入 各 种 对 象 。 例 
如 ,可 单 击 “ 插 入 ”面板 的 “常用 ”选项 卡 中 的 “水 平 线 ” 按 钮 插入 一 条 水 平 线 。 

(5) 在 文档 窗口 中 ,如 果 需 要 对 添加 的 内 容 进行 修饰 ,首先 选取 它 ,然后 在 “属性 检查 
器 ?中 进行 相应 的 设置 。 例 如 ,图 2-31 显示 了 如 何 设置 水 平 线 的 属性 。 





























图 2-31 “水 平 线 " 属 性 


(6) 在 编辑 网 页 时 ,如 果 文 档 窗口 标题 栏 文件 名 后 有 一 个 星 号 * , 则 表示 当前 文档 没 
有 保存 ,此 时 应 当 按 下 Ctrl 十 S 键 ,保存 对 网 页 的 修改 。 如 果 需 要 在 浏览 器 窗口 中 查看 网 
页 效果 , 则 应 按 下 Fl2 键 。 

注意 ; 在 制作 网 页 过 程 中 ,如 有 疑问 ,可 以 按 Fl 键 获取 联机 帮助 信息 。 


2.3 文本 修饰 


2.3.1 文本 的 输入 


文本 是 网 页 表达 信息 的 主要 途径 之 一 ,大 量 的 信息 传播 都 以 文本 为 主 。 文 本 在 网 站 
中 的 运用 最 为 广泛 , 因此 ,文本 的 输入 与 处 理 是 最 基本 和 最 重要 的 技能 之 一 。 在 
Dreamweaver 中 输入 文字 的 方法 很 简单 , 它 和 在 Microsoft Word 等 文字 编辑 软件 中 的 输 
人 方法 很 相似 。 在 “文档 "窗口 中 单 击 ,出 现 输入 提示 光标 后 ,选择 输入 法 , 即 可 直接 输入 
相关 文字 。 

在 Dreamweaver CC 中 的 文本 删除 ,复制 .粘贴 方法 与 Microsoft Word 基本 相似 。 
用 户 必须 先 选中 该 文字 ,然后 再 对 选 定 文本 做 相应 的 编辑 处 理 。 但 它 选 取 文 字 的 方法 除 
了 利用 鼠标 拖 鼻 和 单 击 文字 外 ,还 可 直接 单 击 段落 标签 。 使 用 这 种 方法 ,用 户 可 以 快速 选 
取 所 需 的 文字 内 容 。 

选取 文字 后 ,可 以 在 Dreamweaver 的 “属性 ”面板 中 单 击 CSS 选项 卡 , 对 文字 的 格式 
进行 设置 ,其 中 包括 文字 的 大 小 .字体 格式 .对齐 方式 .字体 颜色 等 。 文 本 的 “属性 ?面板 如 
图 2-32 所 示 。 

















《ia 目标 规则 “新 内 联 样式 > ~ 由 这 集 O 局 8 字体 
bcs] 网 [C5 Desigmer ] | 大 小 加 无 


























图 2-32 “属性 ”面板 
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1. 字体 格式 的 设置 
在 “属性 ”面板 的 “字体 ”设置 中 ,其 默认 的 字体 格式 非常 有 限 , 且 没 有 中 文 。 如 果 用 户 


想 在 网 页 中 添加 其 他 的 字体 ,可 以 按 下 述 方法 实现 。 
(1) 展开 “字体 ”列表 , 单 击 列表 项 中 的 “管理 字体 ”, 如 图 2-33 所 示 。 


加 Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times Jew Roman，serif 





. 


Bill Sans, Gill Sans NT, llyriad Pro, Dejayu Sans Condensed, Helvetics, Arisl, sans-serif 
Gothan, Helvetics Wene, Helvetics, Arial, sans-serif 

Lacida Grande, Lucids Sans nicode, Lucids Sans, Jejaya Sans, Yerdana, sans-serif 

segoe, Segoe UI, Dajaya Sans, Trebuchet NS, Verdans, sans-serif 

Inpsct, Haettenschreiler, Frankin Gothie Bold, Arisl Black, sans-serif 

Consolss, Andale Nono, Lucids Console, Lucids Sans Typewriter, Nonaco, Courier Her, nonospa| 





2-33 ”选择 “管理 字体 ”命令 


(2) 在 弹出 的 “管理 字体 ”对 话 框 中 , 单 击 “ 自 定义 字体 堆栈 ”选项 卡 ,在 “可 用 字体 ” 列 
表 框 中 选择 所 需要 的 字体 , 单 击 二 过 按钮 添加 至 “选择 的 字体 ”, 如 图 2-34 所 示 。 


Cambria, Hoefler Tet, Liberation Serif, Times, Times New Roman serif 





图 2-34 “管理 字体 ”对话 框 
(3) 单 击 “ 完 成 按钮 后 ,在 “属性 ”面板 中 单 击 “ 字 体 ” 下 拉 按 钮 ,在 打开 的 下 拉 列 表 中 
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就 有 了 “宋体 ”的 选项 ,可 更 改 为 文本 的 字体 ,如 图 2-35 所 示 。 











Bl Sans, Gill Sans WT, yriad Pro, Dejaya Sans Condensed, Helvetica, Mrial, sans-serif a 
Gotham, Helvetica Neus, Helvetics, Arial, sans-serif 
lacids Grande, Lucids Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif 


seeoe, Segoe UL, Dejafa Sans, Trebuchet NS, Yerdana, sans-serif 
erif 
Courier Wer, nonospe | 







BInpact, Haettenschreiler, Franklin Gothie Bold, Arial Black, s: 
Consolss, Andsle Nono, Lucida Console, Lucida Sans Typewriter, 





i es 





图 2-35 选择 字体 


2. 文字 颜色 的 设置 

选取 文字 后 ,在 “属性 ?面板 中 可 以 设置 文字 的 颜色 。 设 置 方法 如 下 。 

方法 一 : 单 击 * 颜 色 ” 框 ,在 弹出 的 颜色 表 中 用 取 色 器 选取 。 

方法 二 : 直接 在 “颜色 ” 框 后 的 文本 框 内 输入 颜色 的 数值 , 若 为 Hex 颜色 模型 , 则 输 
人 十 六 进 制 的 数值 ,例如 #CCFF00, 如 图 2-36 所 示 。 





面 画 画面 画面 而 
画面 夯 夯 画面 由 





字体 0) 电 未 体 加 | 











元 -人 -上 辣 
加 [Et Ti 和 





图 2-36 选择 颜色 


3. 文字 样式 的 设置 

当 设 置 文本 格式 时 ,Dreamweaver 会 自动 跟踪 创建 的 样式 ,例如 字体 格式 ,大 小 、 颜 
色 等 。 当 设置 完成 时 ,在 “属性 ”面板 的 “目标 规则 ”中 就 会 自动 产生 新 创建 的 样式 ,其 默认 
为 “二 内 联 样式 >”。 在 以 后 的 制作 中 ,每 创建 一 个 新 的 样式 ,Dreamweaver 会 自动 将 生 
成 的 CSS 代码 加 入 到 样式 规则 中 。 同 时 还 可 单 击 * 编 辑 规则 ?按钮 ,为 文本 追加 CSS 规 
则 , 右 侧 “CSS 设计 器 ”面板 将 自动 载 人 ,效果 如 图 2-37 所 示 。 

在 “CSS 设计 器 ”中 还 可 以 对 当前 文本 进行 更 多 定义 ,有 关 CSS 样式 表 的 内 容 在 以 后 
的 章节 中 会 具体 介绍 。 
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4 其 他 设置 


其 他 设置 在 “属性 ?面板 中 还 可 对 文字 的 对 齐 方式 .加 粗 、 斜 体 等 进行 设置 。 它 的 设置 
方法 非常 简单 ,只 需 选 取 当 前 文字 ,然后 单 击 相关 属性 按钮 ,就 可 观看 设置 后 的 效果 了 。 

注意 : 在 实际 的 操作 中 ,网 页 中 的 字体 由 于 受到 客户 端 机 器 的 限制 ,因此 网 页 中 选用 
的 字体 非常 有 限 。 例 如 ,假设 在 网 页 中 使 用 了 “方正 舒 体 "的 字体 格式 ,而 访问 者 浏览 该 网 
页 时 ,如 果 浏 览 者 的 计算 机 上 没有 "方正 舒 体 ”, 则 只 能 以 默认 字体 显示 ,访问 者 所 看 到 的 
网 页 效果 就 会 大 打折 扣 。 为 了 避免 这 种 情况 的 发 生 , 网 页 中 所 使 用 的 字体 格式 一 般 都 是 
中 文 Windows 系统 自 带 的 字体 ,例如 "宋体 ”。 如 果 在 网 页 中 一 定 要 用 某 种 特殊 的 字体 ， 
那么 可 以 考虑 将 该 文字 效果 以 图 片 的 形式 表现 。 


2.3.2 字符 格式 


在 设计 网 页 时 经 常会 插入 一 些 特殊 字符 ,如 注册 商标 .版权 符号 及 商品 符号 等 字符 ， 
具体 操作 方法 如 下 。 

(1) 将 光标 定位 在 要 输入 特殊 字符 的 位 置 。 

(2) 在 “插入 "面板 上 的 “常用 ”选项 卡 中 单 击 “ 字 符 ” 下 拉 按 钮 ,如 图 2-38 所 示 。 


轩 关 一 个 C55 产子 隧 冯 "+ 菇 训 部 代 症 革 . 


























2-37 “CSS 设计 器 "的 “文本 "选项 2-38 “字符 ”下 拉 莱 单 
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(3) 在 弹出 的 下 拉 菜 单 中 单 击 要 输入 的 字符 按钮 。 
注意 : 如 果 在 "字符 ?下拉 菜 单 中 没有 找到 所 需要 的 字符 , 则 可 单 击 * 其 他 字符 ”按钮 ， 
在 弹出 的 “插入 其 他 字符 ”对 话 框 中 寻找 ,如 图 2-39 所 示 。 
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图 2-39 “插入 其 他 字符 ”对 话 框 


如 果 所 需要 的 目标 字符 在 Word 文档 中 ,也 可 利用 "复制 “粘贴 ”命令 ,将 该 字符 粘 
贴 至 Dreamweaver 中 。 


2.3.3 段落 格式 


在 输入 文字 时 , 按 Enter 键 ,文字 则 另 起 一 段 。 此 时 在 HTML 源 文件 中 会 插入 段落 


标志 符号 <p>。 
在 输入 文字 时 , 按 Shift 十 Enter 键 ,文字 则 另 起 一 行 。 此 时 在 HTML 源 文件 中 会 插 
人 行 标志 符号 <br> ,如 图 2-40 所 示 。 





I <lidoctype html> . 
| 
a 2 <html> 加 
<head> 

<meta charset="Utf-8"> 王 维 
<title> 首 页 </title> 


</head> 下 马 饮 君 酒 ， 问 君 何 所 之 ? 
君 言 不 得 意 ， 归 卧 南 山 隆 。 
ee 但 去 其 复 问 ， 白云 无 尽 时 。 


11 <p> 下 马 忆 者 酒 ， 问 君 何 所 之 9 <br> 
12 。 君 言 不 得 意 ， 归 卧 南山 隆 。<br> 

| 加 了 。 ERY. |/p> 
局 | </body> 

I) 5 </htmt> 
加 16 








图 2-40 文字 输入 
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注意 : 在 编辑 窗口 中 直接 输入 的 文字 , 按 Shift 十 Enter 键 ,可 以 手动 进行 换行 。 如 果 
要 添加 空格 , 则 必须 将 输入 法 切换 至 中 文 输入 状态 下 的 全 角形 式 ,此 时 按 空格 键 , 才 会 奏 
效 。 换 行 和 添加 空格 的 操作 也 可 在 “插入 ” 栏 中 的 “字符 ”选项 中 单 击 相关 按钮 ,实现 该 
操作 。 


2.3.4 列表 格式 


在 网 页 设计 中 ,为 了 让 网 页 中 的 文字 排列 更 有 效 ,更 具 组 织 性 .层次 性 和 可 读 性 ,可 用 
列表 来 排列 文本 内 容 。 列 表 的 使 用 可 以 使 网 页 中 的 信息 一 目 了 然 地 表现 出 来 ,浏览 者 通 
过 列表 可 以 快速 而 清楚 地 了 解 当前 网 页 所 要 表达 的 内 容 。 在 Dreamweaver 中 ,常用 的 列 
表 分 为 两 种 ,有 编号 列表 和 项 目 列表 。 所 谓 编 号 列表 ,是 指 该 列表 项 的 内 容 有 一 定 的 先后 
顺序 ,而 项 目 列表 中 的 项 目 是 并 列 的 ,不 存在 先后 顺序 ,它们 的 位 置 可 以 交换 。 

1, 设置 列表 项 

创建 编号 列表 方法 如 下 。 

(1) 在 需要 插入 列表 处 单 击 ,定位 光标 。 

(2) 单 击 * 属 性 ?面板 中 的 “编号 列表 "按钮 ,或 "插入 ?菜单 下 “结构 ? 子 菜单 中 选择 
“项 目 列表 ”按钮 。 

(3) 在 出 现 的 项 目 符号 后 输入 第 一 个 列表 项 目 。 

(4) 按 回 车 键 ,Dreamweaver CC 会 自动 在 下 一 行 加 上 第 二 项 列表 序号 ,从 而 进入 下 
一 条 列表 项 内 容 的 输入 。 

创建 列表 还 可 先 输入 各 项 内 容 ,但 各 项 之 间 必须 是 以 段落 来 划分 的 。 在 选取 各 项 内 
容 后 , 单 击 “ 项 目 列表 ”或 “编号 列表 ”按钮 即 可 创建 列表 。 项 目 列表 的 创建 方法 和 编号 列 
表 相 同 ,只 是 将 "属性 ”面板 中 的 “编号 列表 ”按钮 或 插入 栏 * 文 本 ”选项 中 的 “编号 列表 ” 按 
钮 改 为 “项 目 列表 ”按钮 。 编 号 列表 与 项 目 列表 插入 成 功 后 的 效果 如 图 2-41 所 示 。 


| 编号 列表 : 
1. 系统 要 求 
2 安装 方 











图 2-41 编号 列表 与 项 目 列表 预览 效果 
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2. 修改 列表 属性 

利用 “属性 ”面板 的 “列表 项 目 ” 按 钮 ,可 以 轻松 修改 列表 的 类 型 和 样式 。 修 改 方法 
如 下 。 

(1) 将 光标 定位 于 列表 项 中 (注意 : 不 要 选中 列表 项 ) , 单 击 “ 属 性 ?面板 的 “列表 项 
目 ” 按 钮 。 

(2) 在 弹出 的 “列表 属性 ?对 话 框 中 ,可 对 列表 类 型 及 样式 进行 修改 。 效 果 如 图 2-42 
所 示 。 





图 2-42 “列表 属性 "对 话 框 


3, 设置 子 列表 项 


有 时 需要 表现 不 同 级 别 的 列表 项 ,这 就 需要 创建 子 列表 项 。 创 建 方法 : 将 光标 定位 
在 要 创建 的 子 列表 项 内 容 中 , 单 击 “ 属 性 ”面板 的 “文本 缩 进 " 按 钮 。 如 要 回 到 上 级 列表 项 
中 , 则 可 以 单 击 “ 属 性 ”面板 的 “文本 凸 出 ”按钮 ,效果 如 图 2-43 所 示 。 


Om ocxlsawe CE 
系统 要 求 ， ] 


1. Windows 
0 Intel PentiomB@ 4 或 AMD Athlon®® 64 处 理 器 
o Microsoft® Windows® XP Service Pack 3 或 Windows 7 Service Pack 1 
o 512 MB 内 存 
o 1GB 可 用 硬盘 空间 用 于 安装 ， 
1280x800 屏幕 ，16 位 显卡 
o Java 运 行 时 环境 1.6 
HTML5 媒体 播放 需要 QuickTime 7.6.6 软 件 。 
2. Mac 0S 
o Intel 多核 处 理 器 
o Mac OSX10.68 或 107 版 。 
0 512MB 内 存 
o 1.8GB 可 用 硬盘 空间 用 于 安装 ; 
o 1280x800 屏幕 ，16 位 显卡 
o Java 运 行 时 环境 1.6 
9 DVD-ROM 驱动 器 
o HTML5 媒体 播放 需要 QuickTime 7.6.6 软件 。 
0 带 网 络 连接 








2-43 ”了 于 列表 效果 
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2.4 ” 超 链接 的 运用 





超 链接 是 组 成 网 站 的 基本 元 素 ,是 它 将 千 千 万 万 个 网 页 组 织 成 一 个 个 网 站 ,又 是 它 将 
千 千 万 万 个 网 站 组 织 成 了 风靡 全 球 的 WWW, 因 此 可 以 说 超 链接 就 是 Web 的 灵魂 。 本 节 
首先 介绍 超 链接 的 基本 概念 ,然后 介绍 如 何 创建 和 管理 网 页 中 的 超 链 接 。 


2.4.1 超 链接 的 基本 定义 


网 页 中 的 超 链接 就 是 以 文字 或 图 像 作 为 链接 对 象 ,然后 指定 一 个 要 跳 转 的 网 页 地 址 ， 
当 浏 览 者 单 击 文字 或 其 他 对 象 时 ,浏览 器 跳 转 到 指定 的 目标 网 页 。 

1, 什么 是 URL 

超 链 接 利用 统一 资源 定位 器 即 URL(Universal Resource Locator) 定 位 Web 上 的 资 
源 。 一 个 URL 通常 包括 三 部 分 : 一 个 协议 代码 ,一 个 装 有 所 需 文件 的 计算 机 地 址 (或 一 
个 电子 邮件 地 址 等 ), 以 及 具体 的 文件 地 址 和 文件 名 。 

协议 表明 应 使 用 何 种 方法 获得 所 需 的 信息 ,最 常用 的 协议 包括 HTTP( HyperText 
Transfer Protocol, 超 文本 传输 协议 )、FTP(File Transfer Protocol, 文 件 传输 协议 )、 
mailto( 电 子 邮 件 协议 ) .news(Usenet 新 闻 组 协议 )、Telnet( 远 程 登录 协议 ) 等 。 

Web 上 的 计算 机 实际 上 是 通过 数字 IP 地 址 相连 的 ,而 不 是 通过 名 称 。DNS 名 称 是 
一 个 分 层 结构 。 层 和 层 之 间 以 句点 分 隔 , 最 高 层 位 于 域名 的 最 右边 。DNS 名 称 不 区 分 大 
小 写 ,但 通常 以 小 写 形式 显示 。 

任何 作为 站 点 的 一 部 分 创建 的 文件 夹 和 文件 将 成 为 站 点 服务 器 计算 机 中 的 文件 夹 和 
文件 。 根 据 运 行 在 站 点 服务 器 中 的 操作 系统 的 不 同 , 可 能 会 产生 某 些 方面 的 差异 。 
UNIX/Linux 文件 系统 区 分 大 小 写 , 因 此 如 果实 际 文件 名 为 index. html, 则 要 求 传 送 文件 
Index. html 会 导致 操作 失败 。Windows 文件 系统 不 区 分 大 小 写 ,因此 同样 的 请 求 在 基于 
Windows 的 站 点 服务 器 中 可 以 正确 执行 。 

2. 绝对 URL 

文档 路 径 分 为 三 种 类 型 : 绝对 路 径 .与 根 目 录 相 对 的 路 径 .与 文档 相对 的 路 径 。 

绝对 URL 是 指 Internet 上 资源 的 完整 地 址 ,包括 完整 的 协议 种 类 、 计 算 机 域名 (所 谓 
域名 是 指 一 个 能 够 反映 出 Web 服务 器 实际 位 置 的 化 名 ) 和 包含 路 径 的 文档 名 ,其 包含 的 
是 精确 地 址 ,创建 对 当前 站 点 以 外 文件 的 链接 时 必须 使 用 绝对 路 径 。 其 形式 为 : 协议 : // 
计算 机 域名 /文档 名 。 

3. 相对 URL 


与 根 目录 相对 的 路 径 是 从 当前 站 点 的 根 目 录 开 始 。 站 点 上 的 所 有 可 公开 的 文件 都 存 
放 在 站 点 的 根 目录 下 ,使 用 斜 杠 作为 其 开始 。 例 如 ,/dreamweaver/intro. html 将 链接 到 
站 点 根 目录 下 dreamweaver 文件 夹 中 的 intro. html 文件 。 

与 文档 相对 的 路 径 是 指 和 当前 文档 所 在 的 文件 夹 相对 的 路 径 。 相 对 URL 是 指 
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Internet 上 相对 于 当前 页 面 ( 即 正在 访问 的 页 面 ) 的 地 址 , 它 包 含 从 当前 页 面 指向 目的 页 
面 位 置 的 路 径 。 例 如 public/example. html 就 是 一 个 相对 URL, 它 表示 当前 页 面 所 在 目 
录 下 public 子 目录 中 的 example. html 文档 。 

当 使 用 相对 URL 时 ,可 以 使 用 与 DOS 文件 目录 类 似 的 两 个 特殊 符号 : 句点 (. ) 和 双 
重 句点 (.. ) ,分 别 表示 当前 目录 和 上 一 级 目录 ( 父 目录 )。 

例如 ,filel. html 指定 的 就 是 当前 文件 夹 内 的 文档 ;.. /filel. html 指定 的 则 是 当前 文 
件 夹 上 级 目录 中 的 文档 ; htmldocs/filel. html 则 指定 了 当前 文件 夹 下 htmldocs 文件 夹 
中 的 文档 。 

外 提示 : 在 创建 和 文档 相对 的 路 径 之 前 一 定 要 保存 新 文件 ,因为 在 没有 定义 起 始点 
的 情况 下 ,和 文档 相对 的 路 径 是 无 效 的 。 在 文档 未 被 保存 之 前 ,Dreamweaver CC 会 自动 
使 用 以 file: // 开头 的 绝对 路 径 。 

4. 超 链接 的 分 类 

根据 超 链 接 目标 文件 的 不 同 , 超 链 接 可 分 为 页 面 超 链接 、 锚 点 超 链 接 、 电 子 邮 件 超 链 
接 等 ;根据 超 链 接 单 击 对 象 的 不 同 , 超 链接 可 分 为 文字 超 链 接 、 图 像 超 链接 、 图 像 映射 等 。 


2.4.2 在 Dreamweaver CC 中 设置 超 链 接 


1. 页 面 超 链 接 

页 面 超 链 接 就 是 指向 其 他 网 页 文件 的 超 链 接 ,浏览 者 单 击 该 超 链 接 时 将 跳 转 到 对 应 
的 网 页 ,最 为 常见 。 常 见 的 设置 超级 链接 的 方法 是 : 选取 所 需 文 本 或 图 像 ,然后 单 击 属性 
面板 中 的 “链接 ” 域 ,在 其 中 输入 URL 地 址 或 单 击 * 浏 览 文件 按钮 选取 所 需 文件 即 可 。 
如 果 超 链接 的 目标 文件 位 于 同一 站 点 ,通常 采用 相对 URL; 如 果 超 链接 的 目标 文件 位 于 
其 他 位 置 (例如 Internet 上 的 其 他 网 站 ) , 则 需要 指定 绝对 URL。 

在 “目标 下拉 菜单 中 可 以 设置 4 个 保留 的 超级 链接 目标 ,如 图 2-44 所 示 , 其 意义 分 
别 如 下 。 

_blank: 将 文件 载 人 新 的 无 标题 浏览 器 窗口 中 。 

_parent: 将 文件 载 人 到 上 级 框架 集 或 包含 该 链接 的 框架 窗口 中 。 

_self: 将 文件 载 入 到 相同 框架 或 窗口 中 。 

_top: 将 文件 载 人 到 整个 浏览 器 窗口 中 ,将 取消 所 有 框架 。 
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格式 四 [无 四 类 无 ~ BI 汉 提 兰 兰 标题 中 
Css DD) 无 ~ | 四 ind html Me 目标 @) | 
下 大 








图 2-44 “目标 下拉 菜单 


2. 电子 邮件 超 链接 
所 谓 电 子 邮件 超 链接 就 是 指 当 浏 览 者 单 击 该 超 链接 时 ,系统 会 启动 客户 端 电子 邮件 
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程序 (例如 Outlook Express) 并 打开 “新 邮件 ”窗口 ,使 访问 者 能 方便 地 撰写 电子 邮件 。 
在 文档 窗口 中 要 插入 锚 点 的 区 域 定位 光标 , 单 击 “ 插 入 ”面板 中 “常用 ”选项 卡 的 “电子 
邮件 链接 ”按钮 ,在 弹出 的 对 话 框 中 输入 超 链接 文字 及 邮件 地 址 ,如 图 2-45 所 示 。 


文本 联系 站 长 
电子 部件。 112345678qq com 


2-45 电子 邮件 链接 


若 要 在 图 片上 附加 电子 邮件 链接 ,也 可 选中 该 对 象 , 然 后 在 属性 面板 的 “链接 ” 栏 中 输 
入 “mailto: 电子 邮件 地 址 *。 在 mailto: 后 面 不 要 添加 空格 。 例 如 ,mailto: zhangsan@ 
hotmail. com。 按 回 车 键 确定 。 对 于 mailto 协议 ,应 在 协议 后 放置 一 个 冒号 ,然后 跟 
E-mail 地 址 ;而 对 于 常用 的 HTTP 和 FTP 等 协议 , 则 是 在 冒号 后 加 两 个 斜 杠 , 斜 杠 之 后 
则 是 相关 信息 的 主机 地 址 。 例 如 mailto: somebody@263. net http: //www. microsoft. 
com \ftp: //ftp. go. 163. com。 

当 单 击 电子 邮件 超 链接 后 ,会 自动 启动 系统 自 带 的 邮件 客户 端 ,并 生成 一 封 新 邮件 ， 
如 图 2-46 所 示 。 



































图 2-46 新 邮件 


3.， 其 他 方式 链接 

在 Dreamweaver 中 除了 上 述 内 容 所 讲 到 的 链接 方式 外 ,还 有 空 链 接 、 锚 点 链接 、 热 点 
链接 和 脚本 链接 ,这 几 种 链接 方式 不 再 是 实现 简单 意义 上 网 页 间 的 跳 转 , 而 是 为 了 赋予 链 
接 更 多 的 含义 。 
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空 链接 : 链接 地 址 栏 为 # ,不 会 跳 转 到 任何 位 置 ,对 于 附加 Dreamweaver 行为 有 特殊 
用 处 。 

锚 点 链接 : 可 跳 转 到 页 面 的 特定 位 置 。 使 用 锚 点 链接 ,需要 在 代码 视图 中 使 用 超 链 
接 标签 <a 之 的 name 属性 添加 一 个 跳 转 位 置 ,再 通过 插入 超 链接 的 方法 将 超 链接 目标 指 
向 该 跳 转 位 置 。 

热点 链接 : 把 一 幅 图 片 划分 为 不 同 的 热点 区 域 ,然后 分 别 为 每 一 个 区 域 插入 超 链接 。 

脚本 链接 : 用 来 执行 JavaScript 代码 或 调用 JavaScript 函数 ,对 于 执行 计算 、 验 证 表 
单 或 处 理 其 他 一 些 任务 非常 有 用 。 

例如 ,在 属性 面板 的 "链接 ” 框 中 输入 "javascript: “后 接 JavaScript 代码 或 函数 调用 。 
即 在 “链接 ? 域 中 输入 javascript: alert( 欢 迎 光 临 ?。 保 存 网 页 后 预览 ,会 在 单 击 超 链接 后 
出 现 弹出 框 ,提示 文字 为 “欢迎 光临 ”。 

后 提示 : 因为 JavaScript 代码 出 现在 双 引 号 之 间 , 因 此 在 脚本 代码 中 必须 使 用 单 引 
号 或 在 双 引 号 之 前 加 斜 枉 。 例 如 \\" 欢 迎 光临 \"。 


2.4.3 超 链 接 的 颜色 


在 "页面 属性 对话 框 的 “链接 CSS”" 项 中 可 以 对 链接 的 文字 进行 字体 格式 的 设置 , 同 
时 还 可 以 对 文字 不 同 链接 状态 设置 不 同 的 颜色 。 链 接 颜色 用 于 设置 未 访问 过 的 超 链接 文 
字 颜 色 ,变换 图 像 链接 用 于 设置 鼠标 经 过 该 超 链接 时 文字 的 颜色 ,已 访问 链接 用 于 设置 文 
档 中 已 经 访问 过 的 超级 链接 的 文字 颜色 ,活动 链接 用 于 设置 文档 页 面 中 正在 访问 的 超级 
链接 的 文字 颜色 。 在 Dreamweaver CC 版 中 还 特别 加 入 了 “下 夯 线 样式 ”项 ,如 图 2-47 
所 示 。 


机 接 Css) 
链接 字体 四， 加 ( 同 页 面 字体 ) ~ - 加 





Ah: 呈 中 
链接 颜色 : 岗 | 50708 。 交换 图 像 柑 接 @): 加 | #1ECCD 
EL 0 Ee 
下 面 线 样式 | 仅 在 变换 图 多 时 显示 下 面 线 | 
































图 2-47 超 链接 颜色 
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2.5.1 项 目 说 明 


使 用 Dreamweaver 可 以 很 方便 地 做 出 网 页 ,下 面 以 创建 一 个 简单 的 文本 网 站 为 例 ， 
该 网 站 包含 三 张 网 页 ,主题 为 “舌尖 上 的 中 国 ”。 在 本 例 中 ,使 用 了 文本 输入 、 超 链接 、 版 权 
说 明 等 功能 ,在 后 续 章 节 中 ,我 们 将 逐步 为 该 网 站 添加 更 多 功能 与 内 容 。 


2.5.2 设计 过 程 


(1) 在 Dreamweaver CC 中 创建 新 的 站 点 ,并 新 建 index. html 作为 首页 ,编辑 index. 
html 为 其 添加 背景 颜色 或 背景 图 ,文档 标题 ,文档 内 容 、 导 航 条 ,水平线 ,版 权 信 息 等 内 
容 , 预 览 效果 如 图 2-48 所 示 。 











EI ovestindexhtml Dp- 6x|| 每 sb x 加 | 从 安 剖 





舌尖 上 的 中 国 


剧情 概念 分 集 剧情 美食 图 库 联系 站 长 





姓名 班级 专业 @2015 











图 2-48 “舌尖 上 的 中 国 "首页 


制作 要 点 : 

Q@ “舌尖 上 的 中 国 ”6 个 字 为 内 容 标题 , 需 在 “属性 ?面板 中 设置 为 “标题 1 格式 ,如 
图 2-49 所 示 。 

@ 导航 条 包含 4 个 超 链 接 , 每 个 导航 条 直接 使 用 一 个 空格 隔 开 ,可 和 暂时 不 制作 超 链 
接 ,等 完成 后 续 页 面 后 再 完善 超 链接 地 址 。 

(2) 新 建 2jqgn. html, 制 作 * 剧 情 概念 页面, 编辑 该 页 面 , 添 加 背景 色 或 背景 图 .文档 
标题 ,文档 内 容 、 返 回首 页 超 链接 等 ,预览 效果 如 图 2-50 所 示 。 
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2-49 “标题 "格式 设置 方法 


owen poxj|esstm “| 





2-50 “舌尖 上 的 中 国 " 剧 情 概念 页 面 


制作 要 点 : 

@“ 返 回首 页 " 超 链 接 将 链接 至 index. html, 且 向 右 对 齐 , 如 图 2-51 所 示 。 

@ 两 个 文字 段落 都 有 首 行 缩 进 ,在 此 处 使 用 了 “插入 ”面板 的 “字符 ”下 拉 选 项 中 的 
“不 换行 空格 ”, 实 际 需要 的 空格 数量 ,以 浏览 器 预览 效果 为 准 。 
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CE 
舌尖 上 的 中 国 


和 舌尖 上 的 中 国 》 为 中 国 中 央 电视 台 播 出 的 美食 类 纪录 片 ， 主 要 内 容 为 中 国 各 地 的 美食 生态 。 通 过 对 中 华 
美食 的 多 个 侧面 ， 来 展现 食物 给 中 国人 生活 带 来 的 仪式 、 伦 理 等 方面 的 文化 ; 人 食物 相 
关 、 构 成 中 国美 食 特 有 气质 的 一 系列 元 素 ; 了 解 中 华 饮 食 文化 的 精致 0 源远流长 。 本 片 制作 精良 ，7 集 内 容 制 作 
者 时 13 个 月 ，2012 年 5 月 在 央视 首播 后 ， 在 网 络 上 引起 了 广泛 的 关注 。 0 
2012 年 9 月 在 新 加 坡 星 和 都 会 台 手 出 ，2012 年 10 月 起 在 香港 TVB 坦 容 台 播 出 。 


《舌尖 上 的 中 国 少 从 2011 年 3 月 开始 大 规模 拍摄 ， 时 13 个 月 拍摄 完成 ， 这 也 是 国内 第 一 次 使 用 高 清 设备 
拍摄 的 大 型 美食 类 纪录 片 。 摄 制 组 行走 了 包括 港 省 台 在 内 的 全 国 70 个 拍摄 地 ， 动 用 前 期 调研 员 3 人 ， 导 演 8 人 ， 
15 位 摄影 师 拍 摄 ， 并 由 3 位 和 剪辑 师 间 加 完 成 。 





姓名 研 铝 去 汪 @7015 三 


E> RE BG 目 目 国 70xs8v 
尾 性 






《mL Ty EE 
[css| 坟 国 加 


图 2-51 文本 右 对 齐 


(3) 新 建 3fjq. html, 制 作 “ 分 集 剧 情 ” 页 面 ,编辑 该 页 面 ,添加 背景 色 或 背景 图 ,文档 
标题 ,文档 内 容 , 返 回首 页 超 链接 、 错 点 超 链接 等 ,预览 效果 如 图 2-52 所 示 。 


”者 关上 的 中 国 


密集 第 2 集 第 3 集 第 4 集 第 5 集 第 6 集 第 7 集 


和 En 高 原 ,山林 ， 瀚 泊 ， 海岸线 。 i 和 
一 个 国家 都 没有 这 样 多 潜在 的 食物 原材料 。 人 
挖掘， 捕 撞 。 穿 越 四 季 ， 本 集 析 展现 美味 背后 人 和 自然 的 


,更 的 大人 上 区 。 中 国人 的 训 调 手艺 与 众 不 同 ， 从 最 平凡 的 一 铝 米 饭 ， 一 
个 盆 头 , 到 的 生 政 主食， 吉星 中 国人 手 吉 芝 动 ， 经 欠 积 时 交 结 晶 。 然 生 ， 不 管 吃 下 了 多 少 酒 食 
着 主食， 永远 都 是 中 国人 各 桌 上 最 后 的 主角 。 


第 3 集 转化 的 灵感 
在 吃 的 法 则 里 ， 风 味 重 于 一 切 。 中 国人 从 来 没有 把 自己 束 短 在 一 张 乏 味 的 食品 清单 上 。 人 们 怀 着 对 食 
的 理解 ， 在 不 断 的 尝试 中 寻求 着 转化 的 灵感 。 


第 4 集 时 间 的 味道 
时 间 是 食物 的 泌 友 ， 时 间 也 是 食物 的 死敌 。 为 了 保存 食物 ， 我 们 虽然 已 经 拥有 了 多 种 多 样 的 科技 化 广 
然而 胰 腊 、 风 二 和 本 和 人员 直方 法 在 保鲜 之 dd 与 羡 食 献 城 不 








图 2-52 “舌尖 上 的 中 国 ” 分 集 剧 情 页 面 
在 使 用 Dreamweaver CC 设计 网 页 时 ,如 果 要 插入 锚 点 链接 ,首先 需要 在 代码 视图 中 
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使 用 超 链接 标签 <a 二 的 name 属性 添加 一 个 链接 位 置 ,再 通过 插入 超 链接 的 方法 将 链接 
位 置 指 向 该 位 置 ,具体 操作 如 下 : 

GO 单 击 * 拆 分 ?按钮 切换 到 代码 一 视图 的 拆 分 视图 ,在 代码 中 将 文本 插入 点 定位 到 需 
要 添加 锚 点 的 位 置 处 ,这 里 将 定位 在 ”第 1 集 自然 的 馈赠 ?文本 前 后 ,输入 "<<a name= 
"nol "> 第 1 集 自然 的 馈赠 之 /a 二 ”代码 。 在 文档 窗口 即 显示 出 一 个 黄色 错 记 标 识 , 该 标 
记 仅 编辑 状态 下 可 见 ,预览 时 是 看 不 见 的 ,如 图 2-53 所 示 。 


输入 代码 产生 锚 记 


EE EE 





&nbsp;&nbsp;&nbsp; ;&nbsp;&nbsp;&nb ”| 有 助 于 物种 的 和 国 
上 目的 阶 ， 人 人 采集 ， 扒 千 ， 拉 所 ， 

| 

没有 这 样 多 潜在 的 食物 原材料 。 为 了 得 到 这 第 2 集 主食 的 故事 

份 自然 的 育 山 ， 人 们 采集 ， 近 拾 ， 近 据 ， 捕 的 和 人 人 人 2 

ee 不 人 下 了 多 少 再 如 科 ， 二 








图 2-53 输入 代码 生成 锚 记 


@ 选中 次 级 导航 “第 1 集 "文本 ,在 “属性 ”面板 的 HTML 选项 卡 下 ,链接 ?输入 域 中 
输入 #nol, 即 可 实现 页 面 内 的 错 点 超 链接 ,如 图 2-54 所 示 。 


Dw 文 #(P 多 日 寺 和 (V 括 N 4 人族 (IM) KRIO) 全 人 (Q 站 5(S) 宣 D(W) 帮助 (H) 


mywebsit = DANest\ I q html 





四 





BE 第 2 集 第 3 集 第 4 集 第 5 集 第 6 集 


电 第 1 集 自 然 的 民风 
人 高 原 ， 山林 ， 潮 泊 ， 海岸线。 人 
家 任何 一 个 国家 都 没有 这 样 多 洪 在 的 食物 原材料 。 为 了 得 到 这 份 自然 的 涡 赠 ， 人 们 采集 ， 近 抬 ， 控 气 ， 捕 
捞 。 穿越 四 季 ， 人 


第 2 集 主食 的 故事 
主食 通常 提供 了 人 类 所 需要 的 大 部 分 卡路里 。 中 国人 的 烹调 手艺 与 众 不 同 ， 从 最 平凡 的 一 锅 米 饭 ， 一 个 蚀 
类 到 杰 化 万 二 的 各 主食， 者 是 中 国人 革 芝 动 ， 纪 的 积 的 计量 。 然而， 不 守 吃 下 了 多 少 漂 廊 呆 背 主食 
， 永远 都 是 中 国人 餐桌 上 最 后 的 主角 。 加 


区 3》 Wy DB a 工 上 日 加 70 x 3% 








-B17 入 党 生生 | | 
-je Bi -| 加 








[ 页 醒 属性 ] | 列 夫 页 目 








图 2-54 添加 锚 点 超 链接 
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(4) 为 首页 index. html 的 导航 条 制作 完成 超 链接 ,同时 为 “联系 站 长 ”制作 电子 邮件 
超 链 接 。 选 中 “联系 站 长 ”, 在 “属性 ”面板 的 “链接 ”输入 框 中 输入 “mailto: 邮箱 地 址 ”, 即 
可 完成 电子 邮件 超 链接 ,如 图 2-55 所 示 。 


| 





Dw 文 #p a(E) EE(V A FAM 0) S(O a(s) OW) 大 RH 








区 | 无 -BI 洛 反 振 兰 标题 m) 














> ilto 12380g con 加 国明 加 








图 2-55 添加 电子 邮件 超 链 接 


读者 可 自行 修改 “页 面 属 性 ?中 的 “链接 (CSS)”, 为 站 点 设置 合适 的 超 链接 配色 。 


本 章 实 训 


【 实 训 1 

制作 第 一 个 网 页 index. html, 提 示 欢 迎 信息 ,并 修改 网 页 背景 色 、 文 本 颜色 、 网 页 标 
题 、 窗 口 大 小 ,可 根据 个 人 喜好 自行 制作 。 

【 实 训 2】 

选择 一 个 自己 感 兴趣 的 主题 ,使 用 Dreamweaver 软件 创建 一 个 站 点 ,并 在 其 中 建立 
images 文件 夹 .flash 文件 夹 、sound 文件 夹 和 index. html 文件 ,自行 设计 站 点 文件 夹 结 
构 , 如 图 2-56 所 示 。 

【 实 训 3】 

练习 网 页 的 文本 编辑 方法 ,在 站 点 中 新 建文 件 ,选择 合适 的 文字 及 图 片 ,编辑 至 如 下 
要 求 的 样式 : 

(1) 选择 自己 喜欢 的 网 页 背景 图 ,修改 网 页 背景 图 。 

(2) 标题 格式 : 标题 1; 字 体 : 黑体 ;颜色 自行 设计 。 
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(3) 正文 字体 : 仿宋 体 ; 字 体 大 小 、 颜 色 自行 设计 。 
(4) 分 别 制作 锚 点 超 链 接 与 回 到 顶部 ” 超 链接 。 








2-56 站 点 目录 参考 
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一 个 好 的 站 点 ,不 但 要 有 精彩 的 内 容 , 还 需要 有 一 个 美观 的 页 面 。 谈 到 美观 就 离 不 开 
图 片 ,在 页 面 中 适当 地 用 一 些 精美 的 图 片 作为 点 级 ,会 使 网 页 大 放 异 彩 。 但 是 ,图 片 使 用 
不 当 ,也 会 适得其反 ,把 网 页 的 访问 者 给 吓 跑 。 


3.1 图 像 的 一 般 知 识 





3.1.1 矢量 图 与 位 图 


在 图 像 处 理 过 程 中 ,用 户 需要 区 分 矢量 图 和 位 图 。 

1. 矢量 图 

矢量 图 形 使 用 称 为 撩 量 的 线条 和 曲线 (包括 颜色 和 位 置信 息 ) 描 述 图 像 。 例 如 ,一 个 
椭圆 的 图 像 可 以 使 用 一 系列 的 点 (这 些 点 最 终 形成 椭圆 的 轮廓 ) 描 述 ;填充 的 颜色 由 轮廓 
( 即 笔触 ) 的 颜色 和 轮廓 所 包围 的 区 域 ( 即 填充 ) 的 颜色 决定 。 
矢量 图 对 于 设计 来 说 可 是 个 好 东西 ,设计 者 再 不 用 考虑 一 些 图 片 精度 方面 的 要 求 了 ， 
而 且 里 面 的 内 容 都 可 以 作为 单独 的 部 分 随意 地 修改 ,实在 是 不 错 ! 
2. 位 图 
位 图 图 形 由 排列 成 网 格 的 称 为 像素 的 点 组 成 。 例 如 ,在 一 个 位 图 的 椭圆 图 形 中 ,图 像 
由 网 格 中 每 个 像素 的 位 置 和 颜色 值 决定 ;每 个 点 被 指定 一 种 颜色 ;在 以 正确 的 分 辩 率 查看 
时 ,这 些 点 就 像 马 赛 克 那样 拼合 在 一 起 形成 图 像 。 

如 图 3-1 所 示 为 矢量 图 与 位 图 在 放大 8 倍 后 的 对 比 。 


3.1.2 图 像 格式 


图 片 是 页 面 内 最 常见 的 元 素 之 一 。 图 片 可 以 插 在 HTML 代码 中 ,也 可 以 使 用 CSS 
设置 成 元 素 的 背景 图 片 ,而 根据 图 片 的 格式 不 同 , 其 适用 的 地 方 也 不 太 相 同 。 

在 后 面 的 章节 中 将 使 用 Fireworks 对 设计 效果 图 进行 拆 分 .切片 和 输出 ,因此 下 面 将 
结合 Fireworks 进行 相应 的 讲解 。 

(1) 启动 Fireworks CS6 ,选择 "文件 ”打开 ”( 或 者 按 Ctrl 十 O 键 ) 打 开 “ 打 开 ” 文 件 
对 话 框 ,如 图 3-2 所 示 。 
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100% 矢 量 图 放大 到 800% 的 效果 
a 
100% 位 图 放大 到 800% 的 效果 





图 3-1 矢量 图 与 位 图 对 比 
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City-Ferris-Whe.. Colorful-Candy-. cookie-monste., Cool-Fresh-Spl.. 


Ow 


Cooliphone-6-... Ferris-Wheel-M.. I-am-In-Concer.. iphone5-890x1... 


& 
最 访问 的 位 置 





Lovely-People 
[文件 























回 打 开 为 “未 命名 ”QD 
加 风 画 打开 内 





图 3-2 ” Fireworks CS6* 打 开 ” 对 话 框 


(2) 选择 一 张 图 片 文件 , 单 击 “ 确 定 ” 按 钮 打开 此 文件 。 
(3) 选择 “文件 ”>“ 图 像 预览 ”命令 (或 者 按 快捷 键 Ctrl 十 Shift 十 X) ,打开 “图 像 预 览 ” 


对 话 框 ,如 图 3-3 所 示 。 
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图 3-3 ”Fireworks CS6* 图 像 预 览 " 对 话 框 


1. JPG/JPEG 图 片 

JPEG 格式 是 按 Joint Photographic Experts Group( 联 合 图 片 专家 组 ) 指 定 的 压缩 标 
准 产生 的 压缩 格式 , 属 J-PEG File Interchange Format, 可 以 用 不 同 的 压缩 比例 对 文件 进 
行 压缩 ,这 是 到 目前 为 止 比较 好 的 图 像 压缩 技术 ,属于 有 损 压 缩 。 质 量 越 高 , 则 文件 越 大 ， 
质量 越 低 , 则 文件 越 小 。JPG 图 像 支 持 真 彩色 ,所 以 常用 于 具有 全 彩 的 连续 色调 图 像 。 

设置 图像 预览 ?对 话 框 中 的 选项 ,如 图 3-4 所 示 , 并 观察 右边 预览 图 的 变化 。 


拖 动 此 滑 块 ， 品 质 
越 高 ， 则 图 片 质量 
越 好 ， 但 图 片 文件 一 | 
较 大 

设置 平滑 级 别 则 图 
像 会 变 得 模糊 

















| 加 口 wen 




















ET EE 加 前) ] 























图 3-4 在 “图 像 预览 ”对话 框 中 设置 JPEG 文件 质量 
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JPEG 图 像 是 网 页 上 最 常 出 现 的 图 像 格式 之 一 ,文件 扩展 名 为 . jpg, 而 且 浏览 器 都 支 
持 这 种 格式 的 图 片 文件 。 

2. 静态 GIF 图 片 

GIF(Graphics Interchange Format, 图 形 交换 格式 ) 这 种 格式 是 由 CompuServe 公司 
设计 的 ,分 为 87a 及 89a 两 种 版 本 ,存储 格式 有 1~8 位 。 这 是 专用 于 网 络 传输 的 文件 格 


式 , 许 多 平台 都 支持 GIF 。 

GIF 支持 24 位 彩色 “索引 色 ? 格 式 文件 ,由 一 个 最 多 256 种 颜色 的 调 色 板 实现 ,图 像 
大 小 最 多 是 64KX64K 个 像素 点 。 

设置 “图 像 预览 ?对 话 框 中 的 选项 ,如 图 3-5 所 示 , 并 观察 右边 预览 图 的 变化 。 
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“Sy 
RON one 
Em rT 




















图 3-5 在 “图 像 预览 "对 话 框 中 设置 GIF 文件 质量 


“颜色 数 ”: 由 于 8 位 存储 格式 的 限制 ,使 其 不 能 存储 超过 256 色 的 图 像 ,而 且 对 于 不 
同 的 调 色 板 图 像 的 颜色 会 有 很 大 偏差 。 颜 色 数 越 多 ,图 像 越 接近 原始 效果 ,同时 文件 字 节 
数 也 越 大 。 

“失真 ”: 失真 百分比 越 大 ,文件 字 节 数 越 小 ,图 片 质量 也 越 差 。 

“ 拌 动 ”: 抖动 百分比 越 大 ,图 片 的 颜色 过 渡 越 自然 ,同时 文件 字 节 数 也 越 大 。 

GIF 图 片 不 支持 渐变 透明 ,如 图 3-6 所 示 。 

“索引 色 透 明 ”: 图 片 内 和 选择 的 颜色 相同 的 颜色 区 将 是 透明 的 。 

“Alpha 透明 ”: 真正 意义 的 Alpha 透明 ,只 有 PNG 图 片 支持 ,而 对 于 GIF 图 片 , 则 需 
要 优化 选项 中 的 “Alpha 透明 ”。 

相对 来 说 ,GIF 图 形 的 质量 比 JPG 图 像 要 差 一 些 。JPG 图 像 不 支持 透明 属性 ,而 
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图 3-6 GIF 图 片 的 “透明 ”选项 


GIF 图 形 支持 背景 透明 。JPG 图 像 不 支持 动画 ,而 GIF 图 形 支持 动画 。GIF 文件 的 后 组 
名 为 . gif, 动 画 和 静态 图 片 的 后 缀 名 是 一 样 的 。 

3. GIF 动画 

上 文中 提 到 ,GIF 支持 多 图 像 的 定 序 或 覆盖 ,并 分 为 87a 及 89a 两 种 版 本 ,其 中 89a 
是 制作 2D 动画 软件 Animator 早期 支持 的 文件 格式 ,所 以 该 格式 被 广泛 使 用 来 制作 
动画 。 

GIF 动画 的 原理 就 是 在 一 个 文件 内 存储 多 帧 (Frames) 图 像 ,然后 按 顺 序 显 示 , 同 时 
还 可 以 设置 每 帧 的 延 时 时 间 。GIF 动画 目前 仍 被 广泛 使 用 ,例如 QQ 表情 动画 文件 就 是 
GIF 动画 , 它 不 需要 安装 播放 插件 就 可 以 在 各 种 浏览 器 内 显示 。 

4. PNG 图 片 

PNG(Portable Network Graphic) 是 一 种 新 兴 的 网 络 图 形 格式 ,结合 了 GIF 和 JPEG 
的 优点 , 像 GIF 一 样 无 损 压 缩 , 像 JPEG 一 样 拥有 一 百 多 万 种 颜色 ,具有 存储 形式 丰富 的 
性 点 。PNG 最 大 色 深 为 48b, 采 用 无 损 压缩 方案 存储 ,而 且 能 够 显示 带 透 明度 的 Alpha 
通道 ,PNG 是 Fireworks 默认 的 文件 格式 ,如 图 3-7 所 示 。 

目前 并 不 是 所 有 的 浏览 器 都 支持 PNG 文件 ,所 以 其 应 用 范围 远 远 比 不 上 JPED 和 
GIF 图 片 。 例 如 Firefox 和 Opera 都 支持 Alpha 透明 的 PNG 文件 ,但 是 IE7 以 下 版 本 都 
不 支持 ,用 IE6 浏览 带 Alpha 透明 的 PNG 图 片 ,其 效果 如 图 3-8 所 示 。 
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图 3-7 用 Firefox 浏 览 PNG 图 片 
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图 3-8 用 Windows IE 6.0 浏 览 PNG 图 片 


3.2 在 网 页 中 使 用 图 像 





图 像 具 有 直观 、 生 动 的 特点 ,灵活 地 使 用 图 像 可 以 表达 一 些 文字 所 无 法 表达 的 东西 ， 





网 页 页 面 更 加 丰富 多 彩 
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3.2.1 Web 图 像 使 用 要 点 


在 网 页 中 使 用 图 片 需要 从 访问 者 角度 出 发 ,考虑 一 系列 的 注意 点 ,为 了 减少 访问 者 的 

等 待 时间 `\ 节 约 服务 器 空间 以 及 带宽 流量 ,有 时 候 牺 牲 一 些 质量 也 是 可 以 忍受 的 ,而 且 对 
于 最 高 质量 的 压缩 比 ,是 几乎 看 不 出 损失 的 。 
图 像 的 数量 是 根据 内 容 决 定 的 。 只 用 一 幅 图 像 ,会 使 内 容 突出 、 页 面 安定 。 增 加 一 幅 
图 像 , 页 面 会 因为 有 了 对 比 和 呼应 而 活跃 起 来 。 再 增加 一 幅 , 则 更 加 热闹 活泼 。 但 是 , 限 
于 目前 网 络 的 传输 速度 ,使 用 图 像 时 一 定 要 谨慎 ,大 的 图 像 会 降低 页 面 显示 速度 ,即使 是 
小 图 像 , 如 果 运用 数量 过 多 ,同样 会 使 页 面 下 载 速度 变 慢 。 随 着 网 络 环境 及 技术 条 件 的 改 
善 ,这 种 情况 已 经 有 了 很 大 的 改观 。 

Web 图 像 使 用 要 点 如 下 : 

(1) 确保 文件 较 小 ; 

(2) 控制 图 像 的 数量 和 质量 ， 

(3) 合理 使 用 动画 。 


3.2.2 插入 图 像 与 背景 图 像 


插入 图 像 位 置 可 以 是 普通 段落 表格、 表单 `. 层 ,以 及 设置 背景 图 像 等 。 将 图 像 插 
人 Dreamweaver 中 时 , Dreamweaver 会 自动 在 HTML 源 代 码 中 生成 对 该 图 像 文 件 的 
引用 。 

1. 在 Dreamweaver 中 插入 图 像 

(1) 将 光标 置 于 要 插入 图 像 的 位 置 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 图 像 ” 选 
项 卡 下 的 “图 像 " 按 钮 或 选择 “插入 ”菜单 中 的 “图 像 " 命 令 。 

(2) 此 时 将 打开 “选择 图 像 源 文件 ”对 话 框 ,选取 存放 在 站 点 中 的 图 像 文 件 ,最 后 单 击 
“确认 ”按钮 即 可 将 图 片 插入 到 指定 区 域 。 


(3) 如 果 所 选择 的 图 像 文 件 不 是 站 点 中 的 于 到 | 
文件 , 则 将 打开 Dreamweaver 的 对 话 框 , 如 








图 3-9 所 示 ,提示 是 否 将 图 像 文件 保存 到 站 点 根 文人 位 于 站 点 mywebsit 的 要 文件 去 以 外 
当 您 发 布 站 点 时 可 能 不 能 访问 . 

目录 下 , 单 击 “ 是 ”按钮 ,然后 打开 “拷贝 文件 为 ” i 

对 话 框 ,定位 到 站 点 中 用 于 存放 图 像 文件 的 文件 Datest\ 

夹 ,最 后 单 击 “ 保 存 ” 按 钮 即 可 。 入 感 入 交 这 文 件 复制 到 要 文件 夫 中 由? 





2. 在 Dreamweaver 中 设置 背景 图 像 

在 网 络 上 浏览 页 面 时 ,经 常会 看 到 一 些 网 页 |] ee (se 
的 背景 是 一 张 图 像 , 而 不 是 单纯 的 颜色 , 在。 图 39 提示 将 图像 文件 保存 到 
Dreamweaver 中 设置 背景 图 像 的 方式 如 下 。 站 点 根 目录 下 

(1) 选择 “属性 ”面板 的 “页 面 属性 ”按钮 或 
执行 “修改 ”>“ 页 面 属性 ”命令 ,打开 “页 面 属性 ”对 话 框 ,如 图 3-10 所 示 。 
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(2) 单 击 “ 背 景 图 像 * 后 的 “浏览 ”按钮 , 弹出 “选择 图 像 源 文件 ”对 话 框 ,如 图 3-11 
所 示 。 
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图 3-10 “页 面 属性 ”设置 对 话 框 
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图 3-11 “选择 图 像 源 文件 对话 框 








(3) 在 图 3-11 中 选择 背景 图 像 的 路 径 , 然 后 单 击 “ 确 定 ? 按 钮 。 
(4) 如 果 所 选择 的 图 像 文 件 不 是 站 点 中 的 文件 , 则 将 打开 Dreamweaver 对 话 框 ,如 
图 3-9 所 示 , 提 示 是 否 将 图 像 文件 保存 到 站 点 根 目录 下 , 单 击 “ 是 ”按钮 ,然后 打开 “拷贝 
文件 为 对话 框 ,定位 到 站 点 中 用 于 存放 图 像 文件 的 文件 夹 ,最 后 单 击 “ 保 存 ” 按 钮 
即 可 。 
(5) 回 到 “页 面 属性 ”对 话 框 后 , 单 击 “ 确 定 ”按钮 回 到 页 面 。 页 面 的 背景 已 经 应 用 了 
像 ,如 图 3-12 所 示 。 














| 
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图 3-12 背景 图 设置 效果 





背景 图 像 要 与 页 面 的 大 小 匹配 , 若 背 景 图 像 过 大 ,只 会 在 页 面 中 显示 部 分 图 像 ,如 


图 3-13 所 示 ; 若 图 像 过 小 , 则 背景 图 像 会 像 铺 瓷 砖 一 样 平 铺 满 整个 页 面 ,如 
所 示 。 
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图 3-14 











图 3-13 背景 图 像 大 小 不 合适 (过 大 ) 
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图 3-14 背景 图 像 大 小 不 合适 (过 小 ) 


3.2.3 修改 图 像 属性 
将 图 像 插入 指定 位 置 后 ,可 以 使 用 * 属 性 ”面板 设置 图 像 的 属性 ,如 图 3-15 所 示 。 











属性 

图 像 ，1eK err pe 回国 EGG 无 -页 m 50 [x = 门 苦 换 四 。 标题 | 回 
ve | Om Mf PH YAROA Ros [mr]§ + 芭 
节 图 中 目标 史 忆 

I 标的 | om NN 


图 3-15 图 像 属 性 面板 


ID: 允许 命名 图 像 ,这 样 就 可 以 使 用 脚本 语言 。 

Src: 指定 图 像 的 源 文件 。 

“链接 ”: 指定 图 像 的 超级 链接 。 

Class: 图 片 附带 的 CSS 样式 类 名 。 

“编辑 : 载 和 人 指定 的 图 像 编 辑 器 并 在 该 图 像 编 辑 器 中 打开 选 定 的 图 像 。 

“ 宽 ”" 和 “高 ”: 在 页 面 载 人 时 为 页 面 上 的 图 像 预 留 空间 。 

“替换 ”: 指定 出 现在 图 像 位 置 上 的 可 选 文字 。 

“地 图 ”: 允许 创建 客户 端 图 像 映射 。 

“目标 ”: 指定 链接 页 面 应 该 载 人 的 框架 或 窗口 。 

“原始 ”: 为 图 片 指定 Photoshop 源 文件 路 径 。 如 果 该 图 片 与 Photoshop 源 文件 不 同 
步 , 则 表明 Dreamweaver 检测 到 原始 文件 已 经 更 新 ,可 在 “设计 ”视图 中 选择 图 片 并 右 击 
“从 源 文件 更 新 ”按钮 ,图 片 将 自动 更 新 。 
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3.3 其 他 图 像 元 素 





在 网 页 中 ,不 仅 可 以 插入 图 像 文件 ,还 可 以 插入 其 他 图 像 元 素 , 如 插入 图 像 热 区 .插入 
鼠标 经 过 图 像 等 。 


3.3.1 图 像 链 接 与 图 像 映 身 


1. 图 像 超 链 接 

当 浏 览 网 页 ,鼠标 指针 经 过 某 些 文本 、 图 像 时 ,文本 或 图 像 的 形状 会 发 生变 化 ,提示 浏 
览 者 这 部 分 文本 是 有 链接 的 ,此 时 单 击 鼠 标 ,会 打开 连接 所 指向 的 内 容 , 这 就 是 超 链接 。 

在 网 页 中 指定 图 像 作 为 超 链 接 非常 简单 ,步骤 如 下 。 

(1) 在 文档 窗口 中 , 单 击 插入 的 图 像 ,然后 在 “属性 ?面板 中 的 “链接 "文本 框 旁 单 击 
“浏览 文件 ”按钮 。 

(2) 打开 “选择 文件 "对话 框 ,定位 到 要 跳 转 的 文件 后 单 击 "确认 ”按钮 即 可 。 

2. 图像 映射 

图 像 映射 就 是 指 在 一 幅 图 像 中 定义 若干 个 区 域 (这 些 区 域 被 称 为 热点 ) ,每 个 区 域 中 
指定 一 个 不 同 的 超 链 接 , 当 单 击 不 同 区 域 时 可 以 跳 转 到 相应 的 目标 页 面 。 

为 图 像 创建 链接 中 ,有 这 样 几 种 情况 : 图 片 比较 大 、 要 创建 链接 的 区 域 是 不 规则 区 域 
或 是 只 给 图 片 中 部 分 区 域 创建 链接 。 在 这 种 情况 下 ,可 以 将 图 片 分 成 几 个 区 , 单 击 不 同 的 
区 可 以 打开 不 同 的 链接 ,这 样 的 链接 就 称 为 "图形 映射 ”。 

【实例 3-1】 使 用 Dreamweaver CC 制作 一 个 含有 图 形 热 点 链接 的 网 页 ,在 网 页 文档 
中 图 像 的 DOWNLOAD 区 域内 创建 一 个 矩形 热点 链接 ,链接 到 index. html, “替换” 输入 
框 为 “下 载 ”。 

(1) 执行 “文件 ">" 新 建 " 命 令 或 按 Ctrl 十 N 键 ,打开 “新 建文 档 ”对话 框 ,新 建 一 个 基 
本 HTML 网 页 文档 。 

(2) 执行 “插入 ”一 “图 像 " 命 令 , 在 网 页 文档 中 插入 如 图 3-16(a) 所 示 的 原 图 。 

(3) 选中 插入 的 图 像 后 , 单 击 “属性 ”面板 中 的 矩形 按钮 门 |。 

(4) 在 图 像 中 的 DOWNLOAD 部 分 上 拖 动 鼠标 ,创建 一 个 矩形 热点 ,如 图 3-16(b) 


所 示 。 
详情 点 击 详情 点 击 
DOWNLOAD DOWNLOAD 
人 @) 插入 原 图 (b) 创建 图 像 热点 链接 
图 3-16 插入 原 图 并 创建 图 像 热点 链接 


(5) 选择 创建 的 矩形 热点 ,在 其 "属性 ?面板 的 “链接 文本 框 中 输入 "index. html”, 在 
“ 奉 换 ”输入 框 中 输入 “下 载 ”, 如 图 3-17 所 示 。 
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图 3-17 设置 矩形 热点 属性 


3.3.2 制作 鼠标 经 过 图 像 


图 像 的 变换 效果 是 指 当 站 点 访问 者 将 鼠标 移动 到 图 像 上 时 ,图 像 发 生变 化 。 鼠 标 
移出 图 像 时 ,图 像 又 可 以 还 原 。“ 图 像 变换 ?实际 上 使 用 了 两 幅 图 像 , 即 页 面 首次 载 人 
时 显示 的 图 像 ( 也 叫 原 始 图 像 ) 和 鼠标 移动 到 初始 图 像 上 时 显示 的 图 像 (也 叫 鼠标 经 过 
图 像 ) 。 

鼠标 经 过 图 像 就 是 指 当 访问 者 的 鼠标 经 过 图 像 时 ,图 像 变 为 另 一 幅 图 像 ;而 鼠标 离开 
时 ,图 像 又 恢复 为 原始 图 像 。 它 由 两 幅 图 像 组 成 , 即 首 次 载 人 时 显示 的 图 像 即 原始 图 像 和 
鼠标 经 过 后 翻转 的 图 像 即 鼠 标 经 过 图 像 。 在 创建 鼠标 经 过 图 像 时 应 使 用 相同 大 小 的 两 幅 
图 像 ,可 以 使 用 Fireworks 或 Photoshop 等 图 像 处 理 软件 制作 出 要 用 的 图 像 。 一 般 鼠 标 
经 过 图 像 通 常用 于 按钮 导航 。 

制作 鼠标 经 过 图 像 的 步骤 如 下 。 

(1) 将 插入 点 定位 到 要 插入 鼠标 经 过 图 像 的 区 域 , 然 后 在 “插入 ?面板 的 “常用 ?选项 
卡 中 单 击 “ 图 像 ”选项 卡 下 的 “鼠标 经 过 图 像 "按钮 。 

(2) 打开 “插入 鼠标 经 过 图 像 ” 对 话 框 ,如 图 3-18 所 示 。 


插入 鼠标 经 过 图 像 
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图 3-18 插入 鼠标 经 过 图 像 


在 “图 像 名 称 ”文字 框 内 输入 翻转 图 像 的 名 称 ; 单 击 “ 原 始 图 像 * 文 本 框 后 的 “浏览 ” 按 
钮 ,然后 在 “原始 图 像 " 对 话 框 中 选取 作为 初始 图 像 的 图 片 文件 后 单 击 “确认 ”按钮 ; 单 击 
“鼠标 经 过 图 像 * 文 本 框 后 的 “浏览 按钮 ,然后 在 “鼠标 经 过 图 像 对 话 框 中 选取 作为 鼠标 
经 过 图 像 的 图 片 文件 后 单 击 “确认 ”按钮 ;确保 选中 “ 预 载 鼠 标 经 过 图 像 " 复 选 框 ;在 “替换 
文本 ”文本 框 内 输入 替换 文字 ;在 “ 按 下 时 ,前 往 的 URL” 文 本 框 中 指定 目标 文件 的 地 址 ， 


网 站 建设 与 网 页 设计 项 目 化 教程 


最 后 单 击 “ 确 定 ” 按 钮 。 


(3) 按 F12 键 在 浏览 器 窗口 中 查看 鼠标 经 过 (a) 鼠标 经 过 前 效果 (b) 鼠标 经 过 后 效果 
像 效果 ,如 图 3-19 所 示 。 





对 











图 3-19 和 鼠标 经 过 前 后 效果 对 比 


3.4 在 网 页 中 插入 多 媒体 





多 媒体 技术 的 发 展 使 网 页 的 设计 者 能 轻松 自如 地 在 网 页 中 加 入 声音 动画 、 视 频 等 内 
容 , 使 网 页 变 得 生动 .形象 ,吸引 众多 的 浏览 者 驻足 。 


3.4.1 常用 的 音频 ,视频 格式 


1. 音频 格式 

(1) WAV(Waveform Extension) 格 式 

WAYV 格式 是 微软 公司 开发 的 一 种 声音 文件 格式 ,也 叫 波形 声音 文件 ,是 最 早 的 数字 
音频 格式 ,被 Windows 平台 及 其 应 用 程序 广泛 支持 。WAYV 格式 的 文件 具有 很 好 的 声音 
质量 ,可 以 被 绝 大 多 数 浏览 器 所 支持 ,并 且 不 需要 插件 。 但 是 ,WAV 格式 有 一 个 最 大 的 
缺陷 : 文件 量 过 大 ,一 般 不 用 于 网 络 传输 。 

(2) WMA(Windows Media Audio) 格 式 

WMA 格式 也 是 微软 专用 的 声音 格式 ,可 用 Windows Media Player 播放 ,压缩 率 较 
高 ,音质 还 可 以 ,可 用 于 网 络 。WMA 格式 是 以 减少 数据 流量 但 保持 音质 的 方法 来 达到 更 
高 的 压缩 率 目的 的 ,其 压缩 率 一 般 可 以 达到 1 : 18。 此 外 , WMA 还 可 以 通过 DRM 
(Digital Rights Management) 方 案 加 入 防止 复制 ,或 者 加 入 限制 播放 时 间 和 播放 次 数 ,其 
至 是 播放 机 器 的 限制 ,可 有 力 地 防止 盗版 。 

(3) MP3(MPEG-1 Audio Layer 3) 格 式 

MP3 格式 是 一 种 压缩 格式 ,可 以 使 声音 文件 变 小 。 声 音 的 质量 非常 好 ,压缩 率 较 高 ， 
网 上 很 流行 , 它 在 1992 年 合并 至 MPEG 规范 中 。MP3 能 够 以 高 音质 \ 低 采样 率 对 数字 
音频 文件 进行 压缩 。 换 句 话说 ,音频 文件 (主要 是 大 型 文件 ,比如 WAYV 文件 ) 能 够 在 音质 
丢失 很 小 的 情况 下 (人 耳根 本 无 法 察觉 这 种 音质 损失 ) 把 文件 压缩 到 更 小 的 程度 。 

(4) RM 格式 

RM 格式 包括 . ra、. ram、. rpm 或 Real Audio 格式 : 这 类 格式 的 压缩 比例 要 高 于 
MP3 ,因此 得 到 的 文件 大 小 要 小 于 MP3。 要 播放 这 类 文件 ,访问 者 必须 先 下 载 和 安装 
RealPlayer 辅助 应 用 程序 或 插件 。 这 是 Real 公司 的 专用 声音 格式 ,压缩 率 较 高 ,一 度 曾 
经 非常 流行 。RealAudio 是 由 Real Networks 公司 推出 的 一 种 文件 格式 ,最 大 的 特点 就 
是 可 以 实时 传输 音频 信息 ,尤其 是 在 网 速 较 慢 的 情况 下 ,仍然 可 以 较为 流畅 地 传送 数据 ， 
因此 RealAudio 主要 适用 于 网 络 上 的 在 线 播放 。 现 在 的 RealAudio 文件 格式 主要 有 RA 
(RealAudio) .RM(RealMedia, RealAudio G2) .RMX(RealAudio Secured) 等 ,这 些 文件 
的 共同 性 在 于 随 着 网 络 带 宽 的 不 同 而 改变 声音 的 质量 ,在 保证 大 多 数 人 听 到 流畅 声音 
前 提 下 , 令 带宽 较 宽敞 的 听众 获得 较 好 的 音质 。 
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(5) MIDI(Musical Instrument Digital Interface) 格 式 

MIDI 格式 只 能 保存 乐器 的 声音 ,不 能 保存 其 他 声音 ,文件 很 小 ,比较 特殊 ,5 分 钟 的 
音乐 只 有 几 十 千 字 节 。MIDI 文 件 可 以 被 所 有 的 浏览 器 所 支持 ,并 且 不 需要 插件 。MIDI 
文件 无 法 录制 ,只 能 由 计算 机 系统 上 的 特殊 硬件 和 软件 合成 。MIDI 又 称 作乐 器 数字 接 
口 ,是 数字 音乐 /电子 合成 乐器 的 统一 国际 标准 。 它 定义 了 计算 机 音乐 程序 、 数 字 合 成 器 
及 其 他 电子 设备 交换 音乐 信号 的 方式 ,规定 了 不 同 厂家 的 电子 乐器 与 计算 机 连接 的 电缆 
和 硬件 及 设备 间 数 据 传输 的 协议 ,可 以 模拟 多 种 乐器 的 声音 。MIDI 文 件 就 是 MIDI 格式 
的 文件 ,在 MIDI 文 件 中 存储 的 是 一 些 指令 。 把 这 些 指令 发 送 给 声卡 ,由 声卡 按照 指令 将 
声音 合成 出 来 。 一 般 用 于 背景 音乐 。 

(6) AIF(Audio Interchange File Format) 格 式 

AIF 格式 和 WAYV 格式 一 样 ,具有 很 好 的 声音 质量 ,可 以 在 绝 大 多 数 的 浏览 器 中 播 
放 , 并 且 不 需要 插件 ,但 文件 量 过 大 。 文 件 后 级 名 为 . aif。 

以 上 介绍 的 6 种 音频 格式 都 可 以 在 网 页 中 使 用 ,可 嵌入 相应 播放 器 支持 ,另外 还 有 一 
些 其 他 音乐 格式 ,如 CD 格式 .MP4 格式 .MD 格式 等 都 属于 非 网 页 音频 格式 ,不 可 以 在 网 
页 中 播放 。 

2. 视频 格式 

(1) WMV(Windows Media Video) 格 式 

WMYV 是 微软 推出 的 一 种 流 媒体 格式 , 它 是 在 “同门 ”的 ASF (Advanced Stream 
Format) 格 式 升级 延伸 来 的 。 在 同等 视频 质量 下 ,WMV 格式 的 体积 非常 小 ,因此 很 适合 
在 网 上 播放 和 传输 。 

(2) ASF(Advanced Stream Format) 格 式 

ASF 是 微软 针对 Real 公司 开发 的 一 种 使 用 了 MPEG-4 压缩 算法 的 ,可 以 在 网 上 实 
时 观看 的 流 媒 体格 式 。 该 压缩 算法 可 以 兼顾 高 保 真 以 及 网 络 传输 的 要 求 。 

(3) RMVB 

RM(Real Media) 格 式 是 Real Networks 公司 开发 的 一 种 流 媒 体 文件 格式 ,RMVB 中 
的 VB 是 指 Variable Bit Rate( 可 变 比特 率 ,简称 VBR) ,该 格式 使 用 了 更 低 的 压缩 比特 
率 , 这 样 制 成 的 文件 体积 更 小 ,而 且 画 质 并 没有 太 大 的 变化 。 

(4) AVICAudio Video Interleaved) 格 式 

AVI 称 为 音频 视频 交错 格式 ,是 将 音频 和 视频 同步 组 合 在 一 起 的 多 媒体 文件 格式 。 
AVI 对 视频 文件 采用 了 一 种 有 损 压 缩 方 式 ,压缩 比较 高 ,但 是 应 用 得 比较 广泛 ,例如 时 下 
流行 的 DVDRip, 就 是 通过 DivX 压缩 技术 将 DVD 中 视频 ,音频 压缩 为 AVI 文件 的 。 

由 于 AVI 格式 使 用 的 压缩 方法 没有 统一 标准 ,可 能 还 要 安装 专门 的 解码 器 后 才能 播 
放 ,Real 公司 的 微软 公司 的 播放 器 均 可 播放 ,一 把 钥匙 开 一 把 锁 ,不 同 的 编码 器 生成 不 同 
的 AVI。 

(5) MPEG(Moving Picture Experts Group) 格 式 

MPEG 称 为 运动 图 像 专家 组 标准 ,是 一 种 从 数字 音频 和 视频 发 展 起 来 的 压缩 编码 标 
准 , 包 括 MPEG 音频 .MPEG 视频 和 MPEG 系统 三 个 部 分 。 在 多 媒体 数据 压缩 标准 中 ， 
采用 比较 多 的 MPEG 标准 有 MPEG-1(VCD 采用 该 标准 )、MPEG-2(DVD 采用 该 标准 ) 、 
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MPEG-4。 常 见 的 MPG 格式 也 是 MPEG 的 一 种 ,可 以 看 作 是 它 的 缩写 。 
(6) Flash 格式 
流行 的 Flash 动画 ,支持 交互 ,一 般 使 用 浏览 器 可 直接 播放 。 


3.4.2 添加 背景 音乐 


决定 按 某 种 方法 将 某 种 声音 添加 到 网 页 之 前 ,需要 考虑 以 下 因素 : 添加 声音 的 目的 、 
受众 的 情况 ,文件 大 小 、 声 音质 量 以 及 在 不 同 浏览 器 中 的 差异 等 。 不 同 浏览 器 对 于 声音 文 
件 的 处 理 是 不 一 样 的 。 要 使 声音 尽量 保持 一 致 ,可 以 考虑 将 声音 文件 保存 为 SWF 文件 。 

背景 音乐 是 体现 网 页 个 性 和 风格 的 一 种 常用 手段 .但 由 于 背景 音乐 并 不 是 一 种 标准 
的 网 页 属性 ,所 以 需要 通过 修改 源 代码 的 方式 为 网 页 添加 。 

1. 方法 

(1) 打开 要 添加 背景 音乐 的 网 页 ,切换 到 代码 视图 或 拆 分 视图 。 

(2) 在 <<head 过 和 去/head> 之 间 添 加 以 下 代码 : 过 bgsound src 王 "背景 音乐 的 
URL" loop= "循环 次 数 " /> ,如 图 3-20 所 示 。 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 舌 类 上 的 中 国 c/tittey 
sound src="music.mid" 


bgsound s' 
T </head> 


d" loop="-1" 





图 3-20 添加 背景 音乐 


在 网 页 中 支持 WMA .MP3、MID、WAV、RM 及 AIF 格式 ,bgsound 标记 符 的 基本 属 
性 是 src, 用 于 指定 背景 音乐 的 源 文件 路 径 。 另 外 一 个 常用 属性 是 loop, 用 于 指定 背景 音 
乐 重 复 播放 的 次 数 ; 如 果 不 指定 该 属性 , 则 背景 音乐 无 限 循环 。 一 般 推荐 使 用 MID 格式 
的 音乐 文件 ,因为 文件 比较 小 ,下 载 比较 快 。 

(3) 按 Fl12 键 ,在 浏览 器 窗口 中 预览 背景 音乐 的 效果 。 

2. 注意 点 

用 一 bgsound> 制 作 的 背景 音乐 有 以 下 两 个 特点 。 

(1) 当 窗口 最 小 化 时 ,声音 会 停止 ,恢复 窗口 大 小 时 ,从 断 点 继续 播放 。 

(2) <bgsound> 是 微软 的 和 有 网 页 标记 ,只 被 正 所 支持 ,其 他 浏览 器 可 能 不 支持 。 

使 用 上 述 方法 可 以 方便 地 在 网 页 中 插入 背景 音乐 ,但 考虑 到 网 页 的 下 载 速度 ,所 以 在 
使 用 时 要 注意 文件 的 大 小 。 


3.4.3 添加 Flash 动画 


Flash 动画 是 将 音乐 ,声效 、 动 画 以 及 富有 新 意 的 界面 融合 在 一 起 ,以 制作 出 高 品质 
的 网 页 动态 效果 。 
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插入 Flash 动画 的 具体 操作 方法 如 下 : 
(1) 将 光标 置 于 要 插入 图 像 的 位 置 , 单 击 “ 插 入 ”菜单 ,在 弹出 的 菜单 中 选择 “媒体 ” 选 





Edge Animate a(E) CCtrl+Alt+Shift+E 
HTMLS Video(lV) Ctrl+Alt+Shift+V 
HTMLS Audio(A) 

Flash SWF(F) Ctrl+Alt+F 
Flash Video(l) 

插件 (P) 








图 3-21 选择 Flash SWF 选项 


(2) 在 打开 的 “选择 Flash SWF” 对 话 框 中 找到 文件 的 保存 路 径 , 选 择 需 要 的 Flash 
文件 , 单 击 “确定 ”按钮 。 

(3) 在 打开 的 “对 象 标签 辅助 功能 属性 ”对 话 框 中 设置 Flash 文件 的 标题 ,如 图 3-22 
所 示 。 


标题 - 
访问 估 。。 Tab 便 素 引 














如 果 在 插入 对 象 时 不 想 输入 此 信息 。 半 更 改革 
助 功能 首 寺 参数 。 





3-22 “对 象 标签 辅助 功能 属性 ”对 话 框 


(4) SWF 文件 插入 成 功 ,如 图 3-23 所 示 。 保 存 网 页 ,在 打开 的 “复制 相关 文件 ”对 话 
框 中 单 击 “ 确 定 ” 按 钮 确认 复制 Flash 所 需 的 支持 文件 ,如 图 3-24 所 示 。 
(5) 按 Fl2 键 ,在 浏览 器 窗口 中 预览 Flash 动画 播放 的 效果 。 
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3-23 在 网 页 中 插入 SWF 文件 


Seripts/expressInstall. swf 
Seripts/swfobject_modified js 





图 3-24 “复制 相关 文件 ”对话 框 


3.4.4 添加 FLV 视频 媒体 


在 Dreamweaver CC 中 ,人 允许 用 户 直接 插入 FLYV 格式 的 Flash 视频 ,从 而 实现 不 用 
安装 插件 也 能 播放 视频 的 效果 。 

在 网 页 中 插入 FLV 视频 的 方法 如 下 。 

(1) 将 光标 置 于 要 插入 图 像 的 位 置 , 单 击 “ 插 入 ”菜单 ,在 弹出 的 菜单 中 选择 “媒体 ” 命 
令 , 在 弹出 的 子 菜单 中 选择 Flash Video 命令 ,如 图 3-25 所 示 。 

(2) 在 打开 的 “插入 FLV? 对 话 框 中 单 击 "URL: ”输入 框 后 的 “浏览 "按钮 ,选择 需要 
插入 的 FLV 视频 文件 ,如 图 3-26 所 示 。 

(3) 在 返回 的 对 话 框 中 设置 播放 器 的 外 观 , 可 根据 下 拉 菜 单 的 9 种 不 同样 式 自行 选 
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URL: assets/NacPro. By 
(输入 FLV 文件 的 相对 或 绝对 路 径 ) 

















图 3-26 ”选择 FLV 文件 


择 。 单 击 “ 检 测 大 小 ”按钮 ,Dreamweaver 将 自动 检测 视频 的 宽度 和 高 度 , 并 自动 填充 至 
宽度 和 高 度 的 输入 框 。 勾 选 “自动 播放 ”, 视 频 将 在 浏览 网 页 时 自动 播放 ,不 需要 单 击 播放 
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按钮 ,如 图 3-27 所 示 。 





| 


URL sssets/MacPro. 日 v [Em 
《输入 FLV 文件 的 相对 或 绝对 路 径 ) 





外 更 : 
[aa eo 3 


自动 检测 视频 大 小 
包括 外 观 : 320x240 
回 芭 并 者 a 选择 “自动 播放 " 





四 。 要 更 站 更 闫 请 在 浏 监 固 中 预 页 面 








图 3-27 “插入 FLV” 对 话 框 的 设置 


(4) FLV 文件 插入 成 功 ,如 图 3-28 所 示 。 保 存 网 页 ,在 打开 的 “复制 相关 文件 "对话 
框 中 单 击 “确定 ”按钮 确认 复制 Flash 所 需 的 支持 文件 ,如 图 3-24 所 示 。 按 F12 键 ,在 浏 
览 器 窗口 中 预览 FLV 视频 播放 的 效果 。 

此 时 观察 本 地 站 点 目录 ,会 发 现 自动 生成 了 两 个 SWF 文件 ,如 图 3-29 所 示 。 这 
两 个 文件 是 浏览 器 播放 FLV 视频 时 需要 加 载 的 播放 器 插件 和 外 观 插件 , 千 万 不 可 
误 删 ! 











图 3-28 在 网 页 中 插入 FLV 文件 图 3-29 站 点 中 自动 生成 
两 个 SWF 文件 
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3.5 综合 案例 


3.5.1 项 目 说 明 


下 面 为 第 2 章 的 “舌尖 上 的 中 国 ? 添 加 更 多 功能 与 内 容 , 完 成 一 个 图 文 并 茂 的 小 型 
网 站 ,其 中 除了 前 面 已 完成 的 "首页 "“ 剧 情 概念 ”“ 分 集 剧情 *“ 联 系 站 长 ”外 ,添加 
“美食 图 库 ”“ 美 味 视频 ”两 个 新 页 面 ,并 将 “ 回 到 首页 ”的 文字 超 链接 修改 为 鼠标 经 过 
图 像 效果 。 


3.5.2 设计 过 程 


制作 要 点 如 下 。 

(1) 为 首页 index. html 添加 插图 ,并 添加 新 的 导航 条 栏目 。 在 标题 与 导航 条 之 间 插 
入 空白 行 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “图 像 * 选 项 卡 下 的 “图 像 * 按 钮 ,选择 合适 
插图 ,调整 "页面 属 性 "中 的 “链接 (CSS)”, 修 改 文字 超 链接 默认 配色 与 下 画 线 效果 ,如 
图 3-30 所 示 , 读 者 可 根据 主题 自行 配色 。 首 页 最 终 预 览 效果 如 图 3-31 所 示 。 






























































天 属性 
分 类 衬 接 (Css) 
总 机 拉 字 体 四 : 品 ESGEESB ~ 
) 大 小 加 "x 四 
实 接 记 色 QL); 居 | #554978 。 交 的 图 各 榜 接 中 : 本 | #00013 
已 访 十 接轨 : 天 #54978 。 活动 庆 接 办; 一 | #200013 
下 面 线 样 式 四，[ 保 在 克 搞 图 全 时 旺 示 下 而 线 习 
_ 助 由 _-. 蕊 散户 [ 咀 w 
~ S| 

















图 3-30 配置 文字 超 链接 效果 


(2) 打开 2jqgn. html 页 面 ,将 原来 的 * 回 到 首页 ” 超 链接 删除 ,替换 为 鼠标 经 过 图 
像 "效果 ,设置 过 程 如 图 3-32 所 示 。 

按 Fl2 键 预览 该 页 面 ,效果 如 图 3-33 所 示 。 对 3fffq. html 实现 相同 操作 。 

(3) 在 站 点 中 新 建 gallery. html 页 面 ,为 该 页 面 添加 标题 .返回 首页 按钮 ,并 逐个 添 
加 10 张 美食 照片 ,预览 效果 如 图 3-34 所 示 。 

(4) 在 站 点 中 新 建 video. html 页 面 ,为 该 页 面 添加 标题 .返回 首页 按钮 ,并 插入 FLV 
视频 ,可 根据 屏幕 分 辩 率 等 比例 修改 视频 大 小 ,预览 效果 如 图 3-35 所 示 。 
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图 3-31 首页 预览 效果 






































插入 息 标 经 过 图 像 
图 像 名 称 、 Inage2 一 这 
原始 图 像 ”inages/back1. jpg ET i 
息 标 经 过 图 像 inages/back2. jpg ET 上 -- 
辐 巴 息 标 经 过 图 售 
并 文本 加 到 首页 e 
接 下 时 前往 的 URL: index. htnl ED 




















图 3-32 插入 “鼠标 经 过 图 像 ” 


(5) 完成 首页 及 各 页 面 之 间 的 超 链接 ,确保 每 张 网 页 已 设置 网 页 标题 , 且 所 有 图 片 及 
超 链 接 无 误 ,完成 该 站 点 的 设计 与 制作 。 
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@ ; 和 | Ditest\zjqgn.html DP-0ox | 关于 关上 的 中 国 x lm 
舌尖 上 的 中 国 | 


De er 主要 内 容 为 中 国 各 地 的 美食 生态 。 通 
过 对 中 华美 食 的 多 个 侧面 ， 来 展现 食物 给 中 国人 生活 蒂 来 的 公式、 伦理 等 方面 的 文化 ; 见识 中 国 特色 
售 村 及 与 信物 相关 、 构 成 中 国美 信 特 有 气质 的 一 系列 元 素 ; 了 解 中 华 饮食 文化 的 本 到 和 源流 长 。 

本 片 制作 本 让 ，7 集 内 容 制 作 超 叶 13 个 月 ，2012 征 5 月 在 央视 着 揪 后 ， 在 网 络 引 外 了 广泛 的 关注 。 访 上 
A 台湾 公 视 播 出 ，2012 年 9 月 在 新 加 坡 星 和 都 会 台 播 出 ，2012 年 10 月 起 在 香港 TVB 豆 容 台 





和 舌尖 上 的 中 国 》 从 201]1 年 3 月 开始 大 规模 拍摄 ， 历 时 13 个 月 拍摄 完成 ， 这 也 是 国内 第 一 次 使 用 
高 清 设备 拍摄 的 大 型 美食 类 纪录 片 。 摄 制 组 行走 了 包括 港澳 台 在 内 的 全 国 70 个 拍摄 地 ， 动 用 前 期 调研 
员 3 人 ,导演 8 人 ，15 位 摄影 师 拍摄 ， 并 由 3 位 胃 辑 师 到 辑 完 成 。 








姓名 班级 专业 @2015 














图 3-33 “剧情 概念 "页面 预览 效果 


个 [全 ovessgalev hml PD- OX] 避 的 4 x 国 


舌尖 上 的 中 国 





























图 3-34 “美食 图 库 " 页 面 预 览 效 果 
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@ | Di\test\video.html prox EE x 剧 


舌尖 上 的 中 国 
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叫 化 鸡 


楼 站 转 .杭州 市 西湖 区 狐 山路 30 号 
杭州 楼 外 楼 菜馆 总 店内 























图 3-35 “美味 视频 ?页面 预览 效果 


本 章 实 训 


【 实 训 1 

利用 Fireworks 软件 ,学 会 如 何 将 图 片 导 出 为 不 同 格式 ,并 比较 不 同 格式 的 图 片 在 网 
页 中 使 用 的 区 别 。 

【 实 训 2】 

熟练 各 种 图 片 制作 技巧 ,制作 一 个 图 书 收藏 小 网 站 ,自行 收集 素材 ,具体 要 求 如 下 : 

(1) 网 站 功能 包括 “首页 ”、“ 图 书 分 类 ”、“ 热 门 排行 “封面 图 库 欣 赏 *、“ 联 系 站 


长 "等 。 
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表格 布局 已 经 有 很 多 年 历史 了 ,在 HTML 和 浏览 器 还 不 很 完善 的 时 代 , 要 想 让 页 面 
内 的 元 素 能 有 一 个 比较 好 的 格局 是 比较 麻烦 的 事情 ,由 于 表格 不 仅 可 以 控制 单元 格 的 宽 
度 和 高 度 ,而 且 可 以 互相 赃 套 ,所 以 为 了 让 各 个 网 页 元 素 能 够 放 在 预 设 的 位 置 ,表格 就 成 
为 网 页 制作 者 的 得 力 工具 。 现 今 的 网 页 设计 已 基本 抛弃 了 表格 布局 ,表格 回归 了 它 的 本 
职 任务 ,成 为 承载 行列 数据 的 最 佳 工具 。 





4.1 插入 表格 


4.1.1 表格 的 基本 构成 


表格 是 网 页 设计 制作 中 不 可 缺少 的 元 素 , 它 可 将 各 类 网 页 元 素 有 序 地 显示 在 页 面 上 。 
表格 由 三 个 基础 部 件 构成 。 

， 行 : 水 平 空间 。 

。 列 : 垂直 空间 。 

。 单元 格 : 行列 相交 时 获得 的 空间 。 

整 张 表 格 的 边缘 称 为 边框 ,单元 格 中 的 内 容 和 边框 之 间 的 距离 称 为 单元 格 边 距 
(CellPad) ,单元 格 和 单元 格 之 间 的 距离 称 为 单元 格 间距 (CellSpace) ,如 图 4-1 所 示 。 





间 遇 gg 
# 


一 





边框 一 | 





图 4-1 表格 示意 图 


68 ” ”网 站 建设 与 网 页 设计 项 目 化 教程 


4.1.2 创建 和 选择 表格 


1. 创建 表格 

插入 表格 的 位 置 必须 是 从 一 个 新 行 开始 ,并 且 表 格 独占 一 行 。 

(1) 将 光标 置 于 要 插入 表格 的 位 置 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 表 格 ” 按 
钮 或 选择 “插入 ”菜单 中 的 “表格 ”命令 。 

(2) 此 时 将 打开 “表格 ”对 话 框 ,如 图 4-2 所 示 ,根据 需 求 设置 表格 初始 属性 。 








要 格 大 小 ss 2 
行 数 : 6 玖 4 
表格 宽度 300 | 像素 = 
边 枝 泪 经 : | 。 像素 
单元 格 辽 天。 。 图 














一 一 一 一 


单元 格 间 下 加 


医 助 功能 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
标题 : DIDb Top5 
荐 要 - 























图 4-2 “表格 对话 框 


“表格 "对话 框 中 的 参数 含义 如 下 。 

“ 行 数 ” 和 * 列 ”: 插入 表格 的 行 、 列 数 。 

“表格 宽度 ”: 设置 以 像素 或 浏览 器 窗口 百分比 为 单位 的 表格 宽度 。 

“边框 粗细 ”: 指定 表格 边框 的 粗细 程度 。 

“单元 格 边 距 ”: 指定 单元 格 边 框 和 单元 格 内 容 之 间 的 间距 ,以 像素 为 单位 。 

“单元 格 间距 ”: 指定 相 邻 单元 格 之 间 的 距离 ,以 像素 为 单位 。 

标题 项 中 的 “无 ”: 表示 对 表格 不 启用 列 或 行 标题 。 

“ 左 侧 ”: 表示 将 表格 的 第 一 列 作为 标题 列 。 

“顶部 ”: 表示 将 表格 的 第 一 行 作 为 标题 行 。 

“两 者 ”: 表示 能 够 在 表 中 输入 列 标题 和 行 标题 。 

辅助 功能 项 中 的 “标题 ”: 可 以 创建 一 个 显示 在 表格 外 的 表格 标题 。 

“摘要 ”: 设置 表格 的 说 明 。 

(3) 单 击 “ 确 认 " 按 钮 即 可 将 表格 插入 到 页 面 ,可 输入 表格 内 容 ,文字 、 图 片 ,如 图 4-3 
所 示 。 

表格 建立 之 后 就 可 以 向 表格 内 添加 元 素 了 ,如 图 像 ,文本 和 表格 等 ,方法 如 同 在 文档 
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排名 | 片 名 





1 


| 肖申克 的 救赎 The Shawshank Redemption (1994) 





后 父 The Godfather (1972) 





南 父 2 The GodfatherPar I (1974) 





| 蝙 如 佚 ， 黑 时 骑士 The Dark Knight (2008) 

















储 德 勒 的 名 单 Schindler's List (1993) 





EE 








图 4-3 插入 表格 


中 操作 一 样 。 添 加 文本 ,表格 会 随 着 增多 而 自动 增高 。 
在 单元 格 中 添加 图 像 时 ,如 果 单元 格 的 尺寸 小 于 图 像 的 尺寸 ,单元 格 会 自动 增高 或 


增 宽 。 


在 单元 格 中 插入 表格 的 时 候 , 单 元 格 中 的 表格 叫 作 内 嵌入 式 表格 ,内 赃 表 格 中 的 单元 
格 可 以 再 分 成 多 行 或 多 列 , 并 且 可 以 无 限制 地 插入 ,不 过 内 嵌 的 表格 越 多 ,浏览 器 下 载 时 
间 越 长 ,所 以 内 赃 表 格 最 好 不 要 超过 三 层 。 


2. 选取 表格 





Dw #4 Re( (Vv 和 AD) 个 改 人 


对 表格 进行 编辑 前 ,需要 先 选 择 表格 ,选择 整个 Lauehum xlEGR 并 





表格 的 方法 : 将 鼠标 光标 移动 到 表格 的 任意 边框 上 ， 8a 二 | En 二 


当 光 标 变 成 双向 箭头 形状 时 , 单 击 鼠 标 左 键 , 即 可 选 





择 整 个 表格 ,如 图 4-4 所 示 。 





图 4-4 通过 边框 选择 整个 表格 
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3. 选取 行 或 列 

在 选择 表格 时 ,可 以 通过 鼠标 直接 选择 某 一 行 或 某 一 列 , 也 可 以 同时 选择 多 行 或 
多 列 。 

移动 光标 到 某 一 行 左边 框 处 ,在 鼠标 光标 变 成 向 右 黑 箭头 时 , 单 击 鼠 标 即 可 选择 该 
行 ,如 图 4-5 所 示 。 同 样 选 择 某 一 列 时 ,移动 光标 到 某 一 列 上 边框 处 ,在 鼠标 光标 变 成 向 
下 黑 箭头 时 , 单 击 鼠 标 即 可 选择 该 列 , 如 图 4-6 所 示 。 





图 4-5 选取 整 行 图 4-6 选取 整 列 


在 选择 单行 或 单列 后 , 按 住 Ctrl 键 不 放 , 继 续 选择 需要 的 行 或 列 , 可 同时 选取 多 行 或 
多 列 。 

4. 选取 单元 格 

在 选择 单元 格 时 ,可 以 选择 单个 单元 格 , 也 可 以 选择 一 行 单元 格 .单元 格 区 域 及 不 相 
邻 的 多 个 单元 格 。 当 某 个 单元 格 被 选取 时 ,该 单元 格 周围 会 出 现 黑色 边框 。 

单 击 表格 中 某 个 单元 格 , 按 下 鼠标 左 键 从 这 个 单元 格 上 方 开始 向 要 连续 选择 单元 
格 的 方向 拖 动 鼠 标 选 择 单元 格 ,释放 鼠标 后 ,完成 某 一 区 域 的 单元 格 选 取 , 如 图 4-7 
所 示 。 

在 选择 单元 格 前 按 住 Ctrl 键 ,然后 单 击 需 要 选择 的 单元 格 ,最 后 释放 Ctrl 键 可 选择 
多 个 不 相 邻 的 单元 格 , 如 图 4-8 所 示 。 





图 4-7 拖 动 选择 单元 格 区 域 图 4-8 选择 不 相 邻 单元 格 


4.2 设置 表格 和 单元 格 的 属性 





创建 表格 后 ,需要 对 表格 元 素 进行 一 系列 的 操作 ,最 常用 的 就 是 设置 它 的 属性 。 
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4.2.1 设置 表格 属性 


在 网 页 中 加 入 表格 后 ,可 以 对 表格 的 布局 ,样式 等 进行 详细 的 设置 ,以 使 表格 中 的 布 
局 可 以 精确 地 达到 要 求 。 选 定 整 个 表格 后 ,属性 面板 会 变 成 表格 属性 面板 ,从 选项 中 设置 
各 个 参数 ,如 图 4-9 所 示 。 





图 4-9 表格 属性 面板 


除了 可 以 设置 表格 的 行列 数 外 ,还 可 重新 设置 表格 宽度 、 单 元 格 间 距 和 边 距 ,边框 宽 
度 及 对 齐 方式 。 


4.2.2 设置 单元 格 属性 
选 定 单元 格 后 ,属性 面板 会 变 成 单元 格 属性 面板 ,如 图 4-10 所 示 。 





图 4-10 单元 格 属性 面板 


“水 平 ”: 设置 单元 格 内 容 的 水 平 对 齐 方式 。 有 4 个 值 : 浏览 器 默认 ( 即 普通 单元 格 左 
对 齐 ,标题 单元 格 居中 对 齐 )、 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 

“垂直 ”: 设置 单元 格 内 容 的 垂直 对 齐 方式 。 有 5 个 值 : 浏览 器 默认 (通常 为 中 间 对 
齐 )、 顶 端 对 齐 、 居 中 对 齐 、 底 部 对 齐 和 基线 对 齐 。 

“ 宽 " 和 “高 ”: 以 像素 为 单位 设置 选 定单 元 格 的 宽度 和 高 度 。 

“不 换行 ”: 单元 格 内容 不 受 宽度 限制 , 若 超出 单元 格 宽度 ,也 不 会 换行 ,将 自动 拉 宽 
该 单元 格 。 

“标题 ”: 将 每 个 单元 格 设置 为 表格 标题 。 在 默认 情况 下 ,表格 标题 单元 格 中 的 内 容 
将 被 设置 为 粗 体 并 居中 对 齐 。 

“背景 颜色 ”: 设置 单元 格 的 背景 颜色 。 

同时 ,单元 格 属性 面板 中 还 包含 拆 分 与 合并 单元 格 的 按钮 , 亦 可 切换 HTML 和 CSS 
选项 ,为 单元 格 内 容 添加 更 多 显示 效果 。 


72 ”网 站 建设 与 网 页 设计 项 目 化 教程 


4.3.1 项 目 说 明 


， 合 案 例 


下 面 将 以 "黑白 摄影 "为 主题 ,使 用 表格 布局 制作 一 张 图 文 并 茂 的 网 页 。 

历史 上 ,黑白 摄影 曾 是 摄影 师 唯一 可 以 选择 的 拍摄 模式 。 然 而 , 随 着 时 代 的 进步 , 即 
便 在 彩色 摄影 出 现 后 ,黑白 摄影 还 是 以 其 独特 的 魅力 吸引 着 部 分 摄影 爱好 者 , 它 的 持久 鬼 
力 来 自 于 它 鲜 活 生动 的 影像 效果 及 其 独特 表达 情感 和 泻 染 气氛 的 方式 。 

页 面 的 布局 较为 简单 ,分 为 横向 的 四 栏 ,简单 草图 如 图 4-11 所 示 。 分 栏 结构 主要 包 
含 “网 页 标题 "“ 导 航 条 ”“ 页 面 主题 内 容 ” 及 页 尾 的 版权 信 息 ”。 


4.3.2 设计 过 程 


在 制作 任何 页 面 之 前 ,应 该 已 经 完成 页 面 规划 与 素材 收集 ,排版 布局 是 将 各 种 素材 内 


容 进 行 合理 的 排列 ,形成 美好 的 浏览 体验 。 


本 页 的 制作 步骤 如 下 。 


(1) 根据 草图 框架 ,创建 一 个 4 行 1 列 的 表格 ,最 大 宽度 应 在 950px 以 内 ,如 图 4-12 


所 示 。 
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图 4-11 表格 布局 草图 


图 4-12 创建 最 外 层 表格 框架 


(2) 根据 页 面 的 主题 内 容 , 在 第 二 行 单元 格 中 插入 一 个 1 行 6 列 的 嵌 套 表格 ,用 来 显 


示 导 航 条 ,如 图 4-13 所 示 。 


(3) 在 第 三 行 处 添加 页 面 的 主要 内 容 ,根据 收 集 的 素材 ,这 里 将 显示 4 张 黑 白 摄 影 
经 典 照片 ,并 附 上 每 张 照 片 的 作者 。 这 里 将 插入 一 个 4 行 2 列 的 嵌 套 表格 ,如 图 4-14 
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所 示 。 

(4) 根据 每 一 块 的 实际 素材 内 容 ,适当 调整 每 个 单元 格 的 高 度 , 完 成 页 面 主要 的 分 制 
排版 ,如 图 4-15 所 示 。 

(5) 为 单元 格 填充 内 容 ,完成 后 的 浏览 效果 如 图 4-16 所 示 。 








图 4-13 导航 条 工 套 表格 图 4-14 主要 内 容 区 域 嵌 套 表格 
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4-15 调整 单元 格 大 小 


网 站 建设 与 网 页 设计 项 目 化 教程 

















黑白 摄影 : 看 不 见 的 城 
Ea 而 人 





dogwarcher 























Fr- 
图 4-16 表格 排版 页 面 最终 浏 览 效 果 
本 章 实 训 
【 实 训 1] 
参照 如 图 4-17 所 示 的 表格 样式 ,制作 数据 表格 。 
浏览 器 兼容 性 一 览 表 
CSS 符 征 MSIE 6.0 Firefox 1.0 Firefox 1.5 Opera 8.5 






































HTMLin XML _N EL Y | 

well-formed | Ms Y 

Media Types N Y Y Y 
资料 来 源 : httpJwww webdevoutnet 


图 4-17 【 实 训 1] 表 格 样式 参考 图 
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[ 实 训 2] 
自 拟 一 个 主题 ,使 用 表格 布局 完成 一 张 网 页 ,效果 参考 如 图 4-18 所 示 。 





图 4-18 页 面 布局 参考 


了 
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层 释 样 式 表 (Cascading Style Sheet, CSS) 是 一 个 很 神奇 的 东西 ,设计 者 可 以 通过 修 
改 CSS 样式 的 定义 而 使 网 页 呈现 完全 不 同 的 外 观 ,而 当 网 站 拥有 几 十 甚至 上 百 个 页 面 的 
时 候 ,修改 页 面 链接 的 样式 表 文 件 即 可 修改 页 面 的 外 观 ,从 而 大 大 地 减少 工作 量 。 此 外 ， 
使 用 层 苍 样式 表 , 还 可 以 让 样式 和 内 容 分 离开 ,让 整个 网 页 代码 结构 更 清晰 。 


5.1 认识 CSs 样式 





1997 年 ,W3C 颁布 HTML 4.0 的 同时 也 公布 了 有 关 CSS 的 第 一 个 标准 CSS1。CSS 
目前 最 新 版 本 为 CSS3 ,是 能 够 真正 做 到 网 页 表现 与 内 容 分 离 的 一 种 样式 设计 语言 。 现 代 
网 页 制作 离 不 开 CSS 技术 ,采用 CSS 技术 ,可 以 有 效 地 对 页 面 的 布局 字体、 颜色、 背景 和 
其 他 效果 实现 更 加 精确 的 控制 。 用 CSS 不 仅 可 以 做 出 美观 工整 令 浏览 者 赏心悦目 的 网 
页 ,还 能 给 网 页 添加 许多 神奇 的 效果 。 


5.1.1 CSS 的 神奇 性 


要 领略 CSS 的 神奇 性 ,可 以 访问 一 个 名 为 “CSS 禅 意 花园 ”(CSS Zen Garden,http: // 
www. csszengarden. com/ ) 的 网 站 。 设 计 师 Dave Shea 建立 这 个 网 站 的 目的 就 是 让 广大 的 网 
页 设计 师 认 识 到 CSS 的 重要 。 网 站 提供 一 套 标准 的 HTML 页 面 及 CSS 文件 ,访问 者 可 以 
下 载 这 些 文件 ,然后 自行 修改 CSS 定义 ,以 体现 不 同 的 设计 风格 ,如 图 5-1 所 示 。 

这 些 风格 各 异 ,如 果 查 看 HTML 源 文件 ,访问 者 会 发 现 , 其 HTML 文件 是 相同 的 ， 
而 如 此 纷繁 的 视觉 效果 ,只 因为 引用 了 不 同 的 CSS 文件 ,由 此 让 访问 者 领略 CSS 的 功能 
及 重要 性 。 


5.1.2 CSS 与 浏览 器 


CSS 的 功能 再 神奇 ,也 是 建立 在 浏览 器 对 其 支持 的 基础 上 。 

CSS 自从 CSS1 版 本 之 后 ,W3C 之 后 又 发 布 了 CSS2 和 CSS3 版 本 ,CSS 得 到 了 更 多 
的 充实 ,其 能 控制 的 属性 及 效果 更 加 丰富 。 幸 运 的 是 ,CSS3 特性 大 部 分 都 已 经 有 了 很 好 
的 浏览 器 支持 度 。 各 大 主流 浏览 器 对 CSS3 的 支持 越 来 越 完善 ,曾经 让 多 少 前 端 开发 人 
员 心 碎 的 匡 也 开始 挺进 CSS3 标准 行列 。 














Carden CSS 逢 意 花园 原始 页 面 讲 
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图 5-1 CSS 禅 意 花园 (CSS Zen Garden) 


作为 设计 者 来 说 ,在 网 页 制作 过 程 中 ,应 该 养 成 在 不 同 的 浏览 器 内 预览 页 面 的 好 习 
惯 ,从 而 观察 页 面 效果 是 否 达到 了 设计 的 要 求 ,读者 除了 使 用 Microsoft 的 IE 浏览 器 之 
外 ,还 可 免费 下 载 安装 Chrome 和 Firefox 浏览 器 以 备 测 试 使 用 。 


5.2 创建 和 使 用 CSS 样式 





CSS 既 简单 又 复杂 。“ 简 单 ”是 指 其 规则 定义 很 简 


单 “ 复 杂 ” 


则 是 指 其 涉及 的 属性 范围 很 广泛 ,从 文字 大 


小 .颜色 到 边框 的 样式 ,再 到 元 素 的 定位 等 ,而 对 于 不 
同 的 HTML 元 素 ,其 有 的 属性 可 以 使 用 ,有 的 则 完全 


无 效 ,同时 


,浏览 器 对 于 样式 表 支 持 的 不 同 ,使 得 CSS 


定义 更 加 复杂 。 


5.2.1 “CSS 设计 器 ?面板 


在 Dreamweaver CC 中 ,可 以 通过 “CSS 设计 器 ” 


面板 来 创下 
可 视 化 创 于 


样式 “CSS 设计 器 ?是 一 个 集成 面板 ,支持 
E CSS 文 件 .规则 、 集 合 属性 以 及 媒体 查询 ， 





如 图 5-2 所 示 。 





























图 5-2 “CSS 设计 器 ?面板 
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1. 源 
“ 源 ? 组 (图 5-3) 中 列 出 了 所 有 与 文档 有 关 的 CSS 











样式 表 , 在 这 个 组 中 ,可 以 创建 CSS 样式 并 将 其 附加 | 
到 文档 中 。 CE 
2，@ 媒 体 oem 
“@ 媒 体 "组 用 于 列 出 * 源 "组 中 选中 的 规则 的 全 
部 媒体 查询 。 媒 体 查询 可 以 向 不 同 设备 提供 不 同 的 5 
样式 。 如 图 5-4 所 示 为 在 电脑 上 查看 网 页 的 效果 ,图 5-5 为 在 手机 设备 上 查看 网 页 的 
效果 。 








正信 新 闻 和 风采 





TEST 











图 5-4 网 页 在 电脑 上 的 浏览 效果 


3. 选择 器 

“选择 器 ”组 用 于 列 出 * 源 ”组 中 选择 的 规则 的 全 部 选择 器 ,如 果 没有 选择 CSS 样式 或 
媒体 查询 , 则 此 组 将 显示 文档 中 的 所 有 选择 器 ,如 图 5-6 所 示 。 

4. 属性 
“属性 ”组 可 为 指定 的 选择 器 设置 属性 ,主要 有 布局 文本、 边框, 背景 及 其 他 属性 ,如 
图 5-7 所 示 。 
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正德 职业 技术 学 院 企 德 学 院 得 1998 年 江苏 省 人 民政 
府 正式 批准 筹建 的 一 所 全 日 制 民办 普通 高 等 学 校 由 南 


京 航空 航天 大 学 AE O 























sheader 
sheader div 

#header div div#logo 

sheader div dvznavigation 
#header div divznavigation div 


sheader div divanavigation div ul 
和 


图 5-6 “选择 器 "组 


























5.2.2 创建 CSS 样式 选择 器 
1. 创建 标签 选择 器 
签 选择 器 是 一 种 非常 有 效 的 样式 工具 ,因为 它 可 以 应 用 到 某 个 HTML 标签 在 网 


标 
页 上 的 所 有 位 置 ,从 而 可 以 轻松 地 对 网 页 进行 大 规模 统一 的 设计 。 
完成 


创建 标签 选择 器 的 具体 操作 方法 如 下 。 
(1) 首先 将 网 页 内 容 设计 完整 ,包括 图 片 \ 文 字 、 超 链接 .表格 等 网 页 所 需 元 素 , 完 
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网 页 内 容 架 构 。 

(2) 单 击 “CSS 设计 器 ?面板 中 * 源 ?组 右 侧 的 加 号 “十 ”, 在 弹出 的 菜单 中 选择 “创建 新 
的 CSS 文件 ,如 图 5-3 所 示 。 

(3) 在 弹出 的 对 话 框 中 ,在 “文件 /URL(F):, ”文本 框 中 输入 想 要 使 用 的 CSS 文件 
名 ,如 图 5-8 所 示 , 这 里 新 建 的 CSS 文件 为 style. css 文件 。 

(4) 选择 新 建 的 style. css, 在 “选择 器 "组 中 单 击 右 侧 的 加 号 “十 ”添加 选择 器 ,选择 器 
会 自动 添加 当前 光标 所 在 位 置 的 HTML 标签 ,如 图 5-9 所 示 。 用 户 也 可 自行 修改 需要 使 
用 的 HTML 标签 。 


月 入 CS 罗阳 
加 





图 5-8 创建 新 的 CSS 文件 图 5-9 添加 标签 选择 器 


(5) 在 “属性 ”组 中 单 击 “ 文 本 ” 栏 ,为 网 页 的 正文 添加 所 需要 的 样式 ,如 图 5-10 所 
示 , 添 加 了 font-family、font-size 及 text-indent 等 属性 ,分 别 设置 了 文字 的 字体 、 字 号 及 
缩 进 。 

(6) 转换 到 所 连接 的 外 部 CSS 样式 文件 style. css 中 ,可 以 看 到 定义 的 body 标签 下 
的 p 标签 的 CSS 样式 代码 ,如 图 5-11 所 示 。 


body p { 


font-size: 14px; 
font-family: Tahoma, 咏 体 "; 
text-indent: 2em; 

















图 5-11 CSS 样 式 代码 


(7) 保存 网 页 HTML 文件 和 CSS 文件 后 ,在 浏览 器 中 预览 页 面 , 即 可 查看 整个 网 页 
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的 字体 类 型 等 发 生 的 改变 ,如 图 5-12 所 示 。 


r 
@E )| 闻 Datest\ltab html 


第 ] 集 自然 的 馈赠 


中 国 拥有 世界 上 最 语 戏剧 l 的 自然 景观 高原， 山林， 湖泊 ， 海 岸 线 。 这 种 地 理 跨度 有 助 于 物种 的 
形成 和 保存 ， 任 何 一 个 国家 都 没有 这 样 多 潜在 的 食物 原材料 。 为 了 得 到 这 份 自然 的 涡 赠 ， 人 们 采集 ， 近 
拾 ， 挖掘 ， 捕 捞 。 穿 越 四 季 ， 本 集 将 展现 美味 背后 人 和 自然 的 故事 。 


第 ? 集 主食 的 故事 


主食 通常 提供 了 人 类 所 需要 的 大 部 分 卡路里 。 中 国人 的 训 调 手艺 与 众 不 同 ， 从 最 平凡 的 一 锅 米 饭 ， 
一 个 慢 头 , 到 变化 万 干 的 精 至 主食， 都 是 中 国人 辛勤 劳动 ， 经 验 积累 的 结晶 。 然 而 ， 不 管 0z 下 了 多 少 酒 
全 和 主食 ,永远 都 是 中 国人 餐桌 上 最 后 的 主角 。 




















第 3 集 转化 的 灵感 


在 吃 的 法 则 里 ， 风 味 重 于 一 切 。 中 国人 从 来 没有 把 自己 束缚 在 一 张 乏味 的 食品 清单 上 。 人 们 怀 着 对 
食物 的 理解 ， 在 不 断 的 尝试 中 寻求 着 转化 的 灵感 。 


第 4 集 时 间 的 味道 


时 间 是 食物 的 涩 友 ， 时 间 也 是 食物 的 死敌 。 为 了 保存 食物 ， 我 们 虽然 已 经 拥有 了 多 种 多 样 的 科技 化 
方式 ， 然 而 腊 腊 、 风 干 、 槽 榨 和 烟 生 等 等 古老 的 方法 ， 在 保鲜 之 余 ， 也 曾 意外 地 让 我 们 锋 得 了 与 鲜 食 吉 
然 下 同 、 有 时 其 至 更 加 部 厚 鱼 美的 味道 。 时 至 今日 ， eye 依 人 影响 着 中 国 
人 的 日 常 饮 食 ， 并 且 友 总 着 中 华氏 族 对 于 洁 味 和 世道 人 心 的 某 种 特殊 的 感 


第 5 集 厨房 的 秘密 
要 统计 中 国 菜 的 某 品 数量 、 A 享 炒 前 炸 


葵 ， 火 
候 ， 会 村 ， 调 于 "…' 有 时 候 ， 这 些 色 得 简单 ,有 时 候 抒 又 无 比 复 宁 。 中 加 的 阿房 里 ， 乱 着 什么 样 的 入 
Bd 伎 料 ， 调 的 各 比 ?是 对 时 间 的 精妙 运用 ?是 厨师 们 二 万 化 的 训 抽 革 法 ?这 不 是 一 道 和 

















图 5-12 预览 效果 


2. 创建 类 选择 器 

当 设 计 者 希望 某 一 个 或 某 几 个 元 素 的 外 观 与 网 页 上 的 其 他 相关 标签 有 所 不 同时 ,就 
可 以 使 用 类 选择 器 , 它 可 以 应 用 到 网 页 中 任意 的 元 素 上 ,还 能 更 精确 地 控制 网 页 中 的 某 一 
元 素 。 

很 多 时 候 都 会 看 到 CSS 的 样式 名 称 以 “. ?开头 ,这 个 英文 句点 开头 就 表示 CSS 的 类 
样式 ,类 是 可 以 被 多 次 调用 的 。 

创建 类 选择 器 的 具体 操作 方法 如 下 : 

(1) 与 创建 标签 选择 器 相同 ,在 创建 类 选择 器 之 前 ,需要 先 设计 网 页 内 容 , 并 在 “CSS 
设计 器 ?面板 中 创建 或 选择 * 源 ”组 中 对 应 的 CSS 文件 。 

(2) 在 “选择 器 "组 中 单 击 “ 十 ”添加 选择 器 ,在 显示 的 文本 框 中 输入 . post 文本 ,如 图 
5-13 所 示 。 

(3) 在 “属性 ”组 中 单 击 “ 文 本 ” 栏 .为 网 页 的 正文 添加 所 需要 的 样式 ,如 图 5-14 所 示 ， 
添加 了 color 属性 ,设置 了 文字 的 颜色 。 

(4) 选中 想 要 应 用 该 类 的 网 页 内 容 , 在 “属性 ”面板 中 选择 CSS 选项 卡 ,在 “状态 栏 ”的 
标签 选择 器 中 ,右键 单 击 最 末 一 个 标签 ,在 右键 菜单 中 选择 “设置 类 ”>post, 选 择 之 前 新 
建 的 post 类 ,如 图 5-15 所 示 。 
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国文 本 
color 
font-famy 
font-syle 
fontvariat 
font-weight 
font-sae 
line-height 
ted-align 
text-decoraion =: | 
ted-indert 























Quick Tag Editor... 
设置 类 

设 时 ID 

代码 浏览 器 

将 内 联 CSS 转 找 为 规则 - 





折 梧 外 部 标签 


| 








图 5-15 应 用 CSS 类 


(5) 保存 网 页 HTML 文件 和 CSS 文件 后 ,在 浏览 器 中 预览 页 面 , 即 可 查看 选中 段落 
的 文字 已 变 成 红色 ,如 图 5-16 所 示 。 

3. 创建 ID 选择 器 

ies eg og et donc pr oi 在 
创建 ID 选择 器 时 ,CSS 需要 给 它 命名 , 且 名 称 前 必须 要 有 “#”。 

ee tg a 

(1) 与 创建 标签 选择 器 、 类 选择 器 相同 ,在 创建 ID 选择 器 之 前 ,需要 先 设计 网 页 内 
容 ,并 在 “CSS 设计 器 ”面板 中 创建 或 选择 * 源 ”组 中 对 应 的 CSS 文件 。 
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第 ] 集 自然 的 馈赠 
中 国 据 有 世界 上 最 襄 欢 剧 性 的 自然 景观 ， 高原， 山林 ， 潮 泊 ， 海 岸 线 。 这 种 地 理 叶 度 有 助 于 物种 的 形成 和 保 
存 , 任何 一 个 国家 都 没有 这 样 多 洪 在 的 食物 原材料 。 千 宙 总 人 们 末 集 , 拉 拍 ， 挖掘， 捕捞 。 
让 直 四 季 ,， 本 集 将 展现 美原 背后 人 和 自然 的 故事 。 


第 ? 集 主食 的 故事 


了 人 类 所 需要 的 大 部 分 卡路里 。 中 国人 的 训 调 手艺 与 众 不 同 ， 从 景 平 几 的 一 锅 米饭 
由 和 po 中 国语 元， 经 弘 积 累 的 结晶 ， 然而， 不管 吃 下 了 多 少 酒 食 菜 戎 ， 主食， 


第 3 集 转化 的 灵感 


在 吃 的 去 则 里 ， 风 味 重 于 一 切 。 中 国人 从 来 没有 把 自己 束缚 在 一 张 乏味 的 食品 清单 上 。 人 们 梧 着 对 食物 的 理 
解 ， 在 不 断 的 尝试 中 寻求 看 转化 的 灵感。 


第 入 时 间 的 味道 


时 间 是 食物 的 演 友 ， 时 间 也 是 食物 的 死敌 。 为 了 保存 食物 ， 我 们 虽然 已 经 拥有 了 多 种 多 样 的 科技 化 方式 ， 然 
而 肘 腊 、 风 干 、 糟 及 和 烟 季 等 等 古老 的 方法 ， 在 保鲜 之 余 ， 也 曾 意 外 地 让 我 们 歼 得 了 与 替 食 献 然 不 同 、 有 时 其 至 
更 加 本 厚 鲜美 的 味道 。 时 至 今日 ， 这 些 被 时 间 一 众 制造 出 来 的 食物 ， 浓 然 影响 着 中 国人 的 日 常 饮 食 ， 并 且 理 藏 荐 
中 华 民族 对 于 滋味 和 世道 人 心 的 其 种 特 所 的 感触 


第 5 集 厨房 的 秘密 


要 统计 中 国 菜 的 菜品 数量 、 亚 无 争议 地 划分 菜系 ,是 一 件 几乎 不 可 能 完成 的 事 。 享 炒 前 炸 节 ， 火候 ， 食 材 ， 
调 订 “有 时 候 ， 这 些 显得 简单 ， 有 时 候 却 又 无 比 复杂。 中 国 的 阿房 里 ， 城 区 着 什么 样 的 秘密 ? 是 食材 ， 佐 料 ， 
调料 的 配 比 ? 是 对 对 间 的 精妙 运用 ? 是 图 师 们 王 变 万 化 的 京 制 手法 ? 这 不 是 一 道 简单 的 数字 题 。 








图 5-16 预览 效果 


(2) 在 “选择 器 "组 中 单 击 * 十 "添加 选择 器 ,在 显示 的 文本 框 中 输入 “# para” 文 本 ,如 
图 5-17 所 示 。 

(3) 在 “属性 ”组 中 单 击 * 布 局 " 栏 ,为 网 页 的 正文 添加 所 需要 的 样式 ,如 图 5-18 所 示 ， 
添加 了 width 属性 ,设置 了 文本 宽度 。 











图 5-17 添加 ID 选择 器 5-18 设置 width 属性 
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(4) 选中 想 要 应 用 该 类 的 网 页 内 容 , 在 “属性 ”面板 中 选择 CSS 选项 卡 ,在 “状态 栏 ” 的 
标签 选择 器 中 ,右键 单 击 最 末 一 个 标签 ,在 右键 菜单 中 选择 “设置 ID”>para 选择 之 前 新 
建 的 para ID 选择 器 ,如 图 5-19 所 示 。 





图 5-19 应 用 ID 选择 器 


(5) 保存 网 页 HTML 文件 和 CSS 文件 后 ,在 浏览 器 中 预览 页 面 , 即 可 查看 选中 段落 
文字 的 宽度 为 300px, 如 图 5-20 所 示 。 


第 1 集 自然 的 馈赠 


中 国 拥有 世界 上 最 语 戏 剧 l 的 自然 景观 ， 高 原 ， 山 林 ， 湖 泊 ， 湾岸 线 。 这 种 地 理 跨度 有 助 于 物种 的 
形成 和 保存 ， 任 何 一 个 国 系 都 没有 这 样 多 潜在 的 食物 原材料 。 家 二 得 到 这 从 和 伏 的 江山， 人 们 采集 ， 拉 
拾 ， 控 气 ， 捕 捞 。 弃 越 四 季 ， 本 集 将 展现 美味 背后 人 和 自然 的 故事 


第 2 集 主食 的 故事 


里 。 en 红 
饥 米 饭 ， a 到 变化 力 王 的 情 致 主食 , 都 
| ， 经验 积 系 的 结晶 。 然而， 个 
下 了 多 少 漂 食 半 兰 ， 主 会， 永远 者 是 中 国人 
元 桌 上 最 后 的 主角 。 


第 3 集 转化 的 灵感 


旋 的 法 则 里 ， 风 味 重 于 一 切 。 中 国人 从 来 没有 把 自己 束缚 在 一 张 乏 味 的 食品 清单 上 。 人 们 怀 着 对 
食物 的 理解 ， 在 不 断 的 尝试 中 寻求 着 转化 的 灵感 。 


第 4 集 时 间 的 味道 


时 间 是 食物 的 健 友 ， 时 间 也 是 食物 的 死 政 。 为 了 保存 食物 ， 我 们 虽然 已 经 拥有 了 多 种 多 样 的 科技 化 
方式 ， 然 而 脐 腊 、 风 干 、 和 在 保鲜 之 余 ， 也 曾 意 外 地 让 我 们 获得 了 与 鲜 售 吉 
然 不 同 、 有 时 其 至 更 加 醋 即 鲜美 的 味道 。 时 至 今日 ， 这 些 被 时 间 一 次 制造 出 来 的 食物 ， 依 多 影 响 着 中 国 
人 的 日 常 饮 食 ， 并 且 益 茂 着 中 华 民族 对 于 溢 味 和 世道 人 心 的 荣 种 特殊 的 原 询 。 








图 5-20 预览 效果 
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设置 CSS 样式 属性 





创建 CSS 样式 表 的 过 程 ,就 是 对 各 种 CSS 属性 的 设置 过 程 ,所 以 了 解 和 掌握 属性 设 
置 非 常 重 要 。 在 Dreamweaver CC 中 ,为 了 方便 初学 者 学 习 CSS 样式 属性 ,提供 了 可 视 化 
操作 , 那 就 是 “CSS 设计 器 "面板 上 的 “属性 ?组 ,该 组 中 可 以 设置 “布局 "“ 文 本 “边框 ”、 
“背景 "与 其 他 ”5 种 类 型 的 属性 。Dreamweaver CC 实现 CSS 属性 设置 功能 是 完全 可 视 


化 的 ,无 须 编写 代码 。 
5.3.1 设置 布局 样式 


在 "属性 ?组 的 "布局 栏 中 ,能 够 设置 页 面 元 素 在 页 面 上 的 放置 方式 。 可 以 在 应 用 填 
充 与 边 距 设置 时 ,将 设置 应 用 于 元 素 的 各 条 边 上 ,同时 可 以 应 用 定位 来 确定 元 素 在 页 面 上 


的 相关 位 置 。 如 图 5-21 所 示 为 CSS 面板 的 “布局 ” 栏 。 
定义 样式 设置 以 控制 页 面 上 的 元 素 布局 ,常用 的 属性 
如 下 。 

(1) width( 宽 ) 和 height( 高 ): 决定 元 素 的 大 小 尺寸 ， 
默认 值 为 auto, 也 可 以 使 用 px、em 等 单位 定义 具体 的 宽度 
和 高 度 。 

(2) margin( 边 界 ): 用 数值 和 单位 来 设置 对 象 的 两 边 
的 外 边 距 , 定 义 元 素 边框 (如 果 没 有 边框 则 为 填充 ) 和 其 他 
元 素 之 间 的 空间 大 小 。 

(3) padding( 填 充 ): 用 数值 和 单位 来 设置 对 象 的 内 容 
距 四 边 的 距离 , 即 内 边 距 ,定义 元 素 内 容 和 边框 (如 果 没 有 
边框 则 为 边缘 ) 之 间 的 空间 大 小 。 

(4) float( 浮 动 ): (float) 移 动 元 素 ( 但 是 页 面 并 不 移 
动 ) 并 将 其 放置 在 页 面 边缘 的 左 侧 或 右 侧 。 其 他 环绕 移动 
元 素 的 元 素 则 保持 正常 。 该 属性 是 实现 Div 十 CSS 布局 的 
关键 ,可 实现 多 列 的 版 式 布局 。 

(5) clear( 清 除 ) : 定义 元 素 的 哪 一 边 不 允许 有 层 。 如 
果 层 出 现在 被 清除 的 那 一 边 , 则 (设置 了 清除 属性 的 ) 元 素 
将 移动 到 层 的 下 面 。 

margin 和 padding 很 重要 ,它们 与 盒 模型 有 关系 ,将 
在 "7. 1 盒 模型 ? 节 中 详细 介绍 。 


5.3.2 设置 文本 样式 


在 网 页 设计 过 程 中 ,文本 的 CSS 样式 是 使 用 最 频繁 的 。 
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图 5-21 CSS 的 布局 样式 


在 “属性 ”组 的 “文本 ” 栏 中 ， 


网 站 建设 与 网 页 设计 项 目 化 教程 


可 以 定义 CSS 样式 用 以 对 文本 样式 进行 设置 。 如 图 5-22 所 示 为 CSS 面板 的 “文本 ” 栏 。 

1. 文字 样式 

(1) color( 颜 色 ): 定义 文本 颜色 。 

(2) font-family( 字 体 ); 为 样式 设置 字体 系列 。 例 
如 宋体 .黑体 ,隶书 等 。 默 认 值 为 Time New Roman, 多 
个 值 时 用 逗号 分 隔 即 可 。 

(3) fontvariant( 小 型 大 写字 母 ): 设置 小 型 大 写 
字母 的 字体 显示 文本 ,这 意味 着 所 有 的 小 写字 母 均 会 
被 转换 为 大 写 , 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 
其 余 文 本 相 比 ,其 字体 尺寸 更 小 。 其 值 有 normal( 正 
常 ,默认 值 ) .small-caps( 小 型 大 写字 母 )。 

(4) font-weight( 粗 细 ): 对 字体 应 用 指定 的 或 相 
对 的 粗细 度 。 

(5) font-size( 大 小 ); 定义 文本 的 字号 。 通 过 选择 
数字 和 单位 来 指定 字体 大 小 ,也 可 以 选择 相对 的 字体 
大 小 。 

(6) line-height( 行 高 ): 设置 文本 所 在 行 的 行 高 。 
选择 “正常 "将 自动 计算 字体 的 行 高 ,否则 可 以 输入 一 
个 精确 值 并 选择 其 计算 单位 。 

(7) text-align( 文 本 对 齐 ): 设置 内 容 的 水 平 对 齐 图 5-22 CSS 的 文本 样式 
方式 ,默认 值 为 left( 左 对 齐 )。 

(8) textrdecoration( 修 饰 ) : 使 用 下 画 线 、 上 画 线 、 删 除 线装 饰 文本 。 

(9) textintent( 文 本 缩 进 ): 指定 首 行 缩 进 的 距离 。 指 定 为 负 值 时 则 等 于 是 创建 了 
文本 凸 出 ,但 是 其 显示 则 取决 于 浏览 器 。 

2. 文字 阴影 

(1) text-shadow( 文 本 阴影 ): 向 文本 添加 一 个 或 多 个 阴影 。 

(2) h-shadow( 水 平 阴影 ) : 水 平 阴影 的 位 置 。 

(3) v-shadow( 垂 直 阴 影 ) : 垂直 阴影 的 位 置 。 

(4) blur( 模 糊 ): 模糊 的 距离 。 

(5) color( 阴 影 的 颜色 ): 阴影 的 颜色 。 

3. 区 块 样式 

(1) textrtransform( 大 小 写 ) : 设置 文本 的 大 小 写 , 其 值 有 none( 不 转换 ,默认 值 )、 
capitalize( 首 字母 大 写 ) .uppercase( 大 写 ) lowercase( 小 写 ) 。 

(2) letter-spacing( 字 母 间 距 ) : 在 文字 之 间 添 加 空格 。“ 字 母 间 距 ” 选 项 可 能 会 受到 
页 边 距 调整 的 影响 。 可 以 指定 负 值 ,但 是 其 显示 则 取决 于 浏览 器 。 此 属性 可 用 于 设置 中 
文 的 字 间 距 。 

(3) word-spacing( 单 词 间距 ) : 在 字符 之 间 添 加 空格 。 可 以 指定 负 值 ,但 是 其 显示 则 
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取决 于 浏览 器 。 和 单词 间距 不 同 的 是 ,“ 单 词 间距 ”可 以 覆盖 由 页 边 距 调整 产生 的 字母 之 


间 的 多 余 空 格 。 


(4) white-space( 空 格 ) : 决定 如 何 处 理 元 素 内 容 的 白色 空格 。 
(5) vertical-align( 垂 直 对 齐 ): 指定 元 素 的 纵向 对 齐 方式 。 通 常 是 相对 于 其 上 一 级 
而 言 的 。 只 有 在 被 应 用 于 IMG 标签 时 ,Dreamweaver 文档 窗口 中 才 会 显示 该 属性 。 


4. 列表 样式 


列表 是 HTML 里 一 种 很 有 用 的 显示 方式 ,常用 的 CSS 列表 样式 有 以 下 几 种 。 

(1) list-style-position( 列 表 位 置 ):; 设置 列表 项 标记 的 排列 位 置 ,默认 为 outside, 表 
示 列 表 项 目标 记 放置 在 文本 以 外 ;inside 则 表示 标记 放置 在 文本 以 内 。 

(2) list-style-image( 图 像 标 记 ) : 设置 列表 项 目标 记 的 图 像 ,使 用 url() 函数 获取 图 


片 路 径 。 


(3) list-style-type( 预 设 标记 ): 设置 列 选项 所 使 用 的 预 设 标记 ,默认 为 disc( 实 心 


圆 ) ,decimal 为 数字 标记 。 


5.3.3 设置 边框 样式 


在 “属性 ?组 的 “边框 ? 栏 中 ,可 以 设置 元 素 周围 的 边框 样式 ,设置 边框 样式 可 以 为 元 素 


添加 边框 , 以 及 设置 边框 的 颜色 .宽度 和 样式 。 如 
图 5-23 所 示 为 CSS 面板 的 “边框 ? 栏 。 

所 有 对 象 的 边框 样式 都 可 以 使 用 border 属性 来 设 
置 ,也 可 以 单独 对 边框 的 某 个 属性 进行 设置 。 常 用 的 
边框 属性 如 下 。 

(1) border( 边 框 )， border 对 象 的 边框 样式 复合 
属性 ,语法 格式 为 : 

border: border-width border-style border-color 

(2) border-width( 边 框 宽度 ) : 设置 对 象 边框 的 宽 
度 ,默认 值 为 medium( 中 等 边框 ), 还 可 以 用 数字 自 定 
义 粗细 。 

(3) border-style( 边 框 样式 ) : 设置 对 象 边 框 的 样 
式 ,默认 值 为 none( 无 边框 ), 还 可 设置 dotted( 点 线 )、 
dashed( 虚 线 ) ,solid( 实 线 ) ,double( 双 线 ) .groove(3D 
凹 槽 ) ,ridge(3D 凸 槽 ) inset(3D 凹 边 ) 和 outset(3D 
凸 边 ) 。 
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图 5-23 CSS 的 边框 样式 


(4) border-color( 边 框 颜色 ): 设置 对 象 四 条 边框 的 颜色 。 


5.3.4 设置 背景 样式 


在 背景 图 像 被 插入 到 页 面 中 时 , 它 只 是 一 个 单一 的 图 像 。 用 户 可 以 在 “属性 ”组 的 “ 背 
景 " 栏 中 定义 CSS 样式 的 背景 属性 ,还 能 对 网 页 中 的 任何 元 素 应 用 背景 属性 。 
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灵活 使 用 背景 ,可 以 使 页 面 既 美 观 显示 速度 又 快 ,可 以 对 网 页 中 的 任何 元 素 应 用 背景 
属性 。 例 如 ,创建 一 个 样式 ,将 背景 颜色 或 背景 图 像 添 
加 到 任何 页 面 元 素 中 ,例如 在 文本 、 表 格 、 页 面 等 的 后 
面 ,还 可 以 设置 背景 图 像 的 位 置 ,甚至 可 以 通过 背景 图 
像 来 实现 装饰 性 图 片 的 显示 。 如 图 5-24 所 示 为 CSS 
面板 的 “背景 " 栏 。 

常用 的 背景 样式 属性 如 下 。 

1. 背景 图 

(1 ) background-color (背景 颜色 ): 默认 值 为 
transparent, 表 示 背 景 颜色 为 透明 ,也 可 以 用 RGB 颜 
色 值 .十 六 进 制 颜色 值 和 颜色 名 称 作为 属性 值 。 

(2) background-image (背景 图 ); 设置 要 是 用 的 
背景 图 像 ,需要 指定 背景 图 的 路 径 。 

(3) background-position( 背 景 位 置 ) : 用 于 设置 背 
景 图 像 的 位 置 。 

(4) background-repeat (重复 方式 ): 设置 背景 图 
像 是 否 平 铺 ,其 值 有 repeat (默认 值 ,表示 纵向 和 横向 
平 铺 )、no-repeat (不 平 铺 ) repeat-x( 仅 横向 平 铺 )、 
repeat-y( 仅 纵向 平 铺 ) 。 图 5-24 CSS 的 背景 样式 

(5) background-attachment( 滚 动 方式 ): 设置 背 
景 图 像 是 否 固定 或 随 着 页 面 的 其 余部 分 滚动 , 取 值 有 scroll( 默 认 值 , 随 内 容 滚动 ) 和 fixed 
(固定 不 滚动 ) 。 

2. 相框 阴影 

(1) box-shadow( 相 框 阴 影 ) : 为 相框 添加 一 个 或 多 个 阴影 。 

(2) h-shadow( 水 平 阴 影 ): 水 平 阴影 的 位 置 。 

(3) v-shadow( 垂 直 阴 影 ) : 垂直 阴影 的 位 置 。 

(4) blur( 模 糊 ): 模糊 的 距离 。 

(5) spread( 扩 展 ): 阴影 的 尺寸 。 

(6) color( 阴 影 的 颜色 ): 阴影 的 颜色 。 

(7) inset( 向 内 ): 将 外 部 阴影 (outset) 改 为 内 部 阴影 。 


5.3.5 设置 其 他 样式 
































在 “属性 ”组 的 “其 他 ” 栏 中 ,主要 是 对 列表 样式 表 后 各 se 
进行 设置 , 它 可 以 设置 出 非常 丰富 的 列表 样式 。 如 | 国 四 加 四 加 DB 
图 5-25 所 示 为 CSS 面板 的 “ 自 定义 ” 栏 。 Ee ， 和 








图 5-25 CSS 的 自 定义 样式 
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5.4 综合 案例 


5.4.1 项 目 说 明 


在 第 4 章 的 综合 案例 “黑白 摄影 ”中 ,我 们 仅 使 用 表格 完成 了 页 面 内 容 的 排版 ,但 文 
字 、 图 片 . 超 链接 等 网 页 元 素 都 是 网 页 最 初 的 效果 。 
现在 我 们 使 用 CSS 为 该 页 面 进行 美化 ,设计 细节 ,优化 页 面 设计 。 


5.4.2 设计 过 程 


页 面 美 化 的 过 程 可 按 网 页 结构 分 区 进行 ,各 区 块 完成 设计 后 ,再 根据 统一 的 效果 进行 
细节 微调 。 

主要 制作 要 点 如 下 。 

1. 为 网 页 添加 外 部 CSS 文件 

(1) 单 击 *CSS 设计 器 ">“ 源 "栏目 的 “十 "加 号 ,选择 “创建 新 的 CSS 文件”, 如 图 5-26 
所 示 。 





图 5-26 创建 新 的 CSS 文 件 


(2) 在 弹出 的 “创建 新 的 CSS 文件 ?面板 中 ,输入 新 建 的 CSS 文件 ,例如 style. css, 如 
图 5-27 所 示 。 





5-27 使 用 链接 方式 添加 CSS 文件 


2. 设计 标题 区 域 的 CSS 
(1) 选中 标题 文字 , 单 击 “CSS 设计 器 ”> “选择 器 ”栏目 的 “十 ”加 号 ,Dreamweaver 
CC 将 自动 添加 标题 文字 所 在 的 标签 选择 符 ,如 “tr td h1”, 如 图 5-28 所 示 。 在 本 例 中 ,可 
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将 选择 符 缩写 为 最 后 一 个 标签 ,如 “h1”。 



































图 5-28 添加 标题 文字 的 CSS 选择 符 


(2) 为 标题 文字 设计 font-family( 字 体 ) ,font-size( 大 小 ) 等 属性 ,如 图 5-29 所 示 。 
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图 5-29 标题 文字 的 CSS 样式 


3. 设计 导航 区 按钮 的 CSS 
(1) 选中 导航 条 上 的 文字 ,为 其 添加 CSS 类 型 ,类 名 为 nav, 如 图 5-30 所 示 。 由 于 导 
航 条 上 面 的 按钮 有 6 个 ,因此 创建 为 CSS 类 更 适合 重用 。 








FE ELI 











图 5-30 添加 导航 文字 的 CSS 选择 符 
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(2) 为 导航 文字 设计 font-family (字体 ) ,font-size( 大 小 )、color( 颜 色 )、font-weight 
(粗细 ) ,text-align( 文 字 排 列 ) 和 background-color( 背 景色 ) 等 属性 ,如 图 5-31 所 示 。 





图 5-31 导航 文字 的 CSS 样式 


4。 设计 内 容 区 域 的 CSS 

(1) 内 容 区 域 的 文字 和 图 片 都 是 居中 显示 的 ,因此 ,可 选中 内 容 区 域 4 行 2 列 栓 套 表 
格 中 的 任何 一 个 单元 格 后 ,为 单元 格 添加 CSS 样式 。 我 们 将 创建 一 个 名 为 content 的 类 ， 
可 重用 在 内 容 区 域 每 个 单元 格 中 ,如 图 5-32 所 示 。 

(2) 为 content 类 设计 font-family( 字 体 ) ,font-size( 大 小 ) 和 text-align( 文 字 排 列 ) 等 
属性 ,如 图 5-33 所 示 。 














5-32 添加 内 容 单元 格 的 CSS 选择 符 5-33 内 容 单元 格 的 CSS 样式 


(3) 使 用 鼠标 拖 电 选中 4 行 2 列 府 套 表 格 的 所 有 单元 格 , 右 击 Dreamweaver CC 状态 
栏 标签 选择 器 的 最 后 一 个 HTML 标签 tbody, 单 击 “设置 类 ”菜单 下 的 content, 将 我 们 定 


92 网 站 建设 与 网 页 设计 项 目 化 教程 


义 的 类 应 用 至 每 一 个 单元 格 ,如 图 5-34 所 示 。 


cht 
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图 5-34 应 用 content 类 


5. 设计 页 尾 区 域 的 CSS 
(1) 本 例 中 页 尾 仅 包含 版 权 信息 与 日 期 ,选中 文字 后 添加 新 的 CSS 类 footer, 如 图 5-35 
所 示 。 














图 5-35 添加 页 尾 的 CSS 选择 符 


(2) 为 页 尾 文字 设计 font-family( 字 体 ) ,font-size( 大 小 ) 等 属性 ,如 图 5-36 所 示 。 
按 以 上 步骤 设置 后 ,表格 布局 的 页 面 的 最 终 浏览 效果 如 图 5-37 所 示 。 


第 5 章 ”使 用 CSS 样 式 美化 网 页 











color 
font-family 
fontstye 
fontvariat 
font-waigt 
font-size 
Ine-helgkt 
tat-align 


tad-decoraon 


ted-indert 





图 5-36 
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图 5-37 页 面 最 终 浏览 效果 
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本 章 实 训 
【 实 训 1] 
观摩 “CSS 禅 意 花园 ?网 站 ,同时 思考 一 个 问题 ,该 网 站 使 用 的 CSS 样式 表 是 内 部 的 
还 是 外 部 的 呢 ? 
【 实 训 2】 
完成 一 段 文字 排版 的 CSS 设计 ,灵活 运用 不 同 的 CSS 样式 ,区 分 标题 ,正文 等 文字 ， 
效果 参考 如 图 5-38 所 示 。 





字体 样式 Vindows Internet Explorer EF 


3 snd Settiner Wninistrutor ly Torments BAATfE a [xa 2 
3 er | [全 -DIE OA 
CSSer 必 备 工具 Firefox + Web developer 








开始 试用 Firefox + Webdeveloper， 这 玩意 的 好 


处 是 可 以 直接 读 出 你 页 面 上 的 css 文件 ， 而 且 当 你 有 任何 修改 ， 它 都 能 刷新 显示 。 对 于 本 地 文件 和 直 


接 访问 网 上 的 任何 WwW 网址 都 有 用 的 | 非常 方便 , 适合 自己 调试 和 学 习 别 人 的 网 站 , 另外 还 有 其 他 一 
些小 功能 托 有 意思 。 


Tirefox 考 用 网 页 设 - 


图 5-38 【 实 训 2] 效 果 参 考 图 
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很 多 从 事 网 页 设计 的 计算 机 专业 人 员 , 对 于 网 页 的 制作 技术 驾轻就熟 ,但 对 于 网 页 富 
有 艺术 性 和 个 性 的 设计 却 感到 力不从心 。 特 别 是 没有 经 过 艺术 设计 专业 训练 的 网 页 制作 
者 ,在 掌握 了 网 页 制作 技术 的 情况 下 ,都 渴望 将 自己 的 网 页 制作 得 更 具 创意 和 美感 。 

在 网 页 设计 领域 ,很 长 时 间 以 来 版 式 设计 被 认为 是 技术 型 工作 ,没有 艺术 性 可 言 , 网 
页 的 版 式 设计 缺乏 创造 性 的 构思 和 系统 性 的 考虑 。 现 在 ,人 们 越 来 越 认识 到 版 式 设计 在 
网 页 界面 中 的 重要 作用 , 它 是 技术 和 艺术 的 高 度 统一 ,不 仅 需要 技术 人 员 ,还 需要 设计 师 ， 
一 同 构造 出 和 谐 流畅 .自然 的 网 页 界面 。 





6.1 网 页 版 式 设 计 





网 页 界面 的 版 式 设计 是 指 将 文字 、 图 形 图 像 .色彩 、 动 画 和 视频 多 媒体 等 网 页 对 象 的 
传达 要 素 , 根 据 特定 内 容 和 主题 ,在 网 页 限定 范围 内 将 设计 意图 以 视觉 形式 表现 出 来 。 这 
一 过 程 实际 上 是 创造 性 ,艺术 性 的 传达 信息 的 过 程 。 

从 网 页 技术 角度 讲 ,设计 者 通常 是 围绕 着 页 面 中 的 导航 栏 ` 图 像 ,动画 和 正文 等 内 容 
展开 页 面 布局 的 。 在 页 面 制作 过 程 中 要 确定 一 个 页 面 的 布局 ,应 该 综合 考虑 如 何 安置 页 
面 中 的 各 种 内 容 , 比 如 标题 文字 、 导 航 栏 图片 .动画 、 超 链接 等 。 


6.1.1 网 页 版 面 的 视觉 要 素 


点 , 线 . 面 是 构成 视觉 空间 的 基本 元 素 , 是 表现 视觉 形象 的 基本 设计 语言 。 网 页 设计 
实际 上 就 是 如 何 经 营 好 三 者 的 关系 ,因为 不 管 是 任何 视 沉 形象 或 者 版 式 构成 ,归结 到 记 ， 
都 可 以 归纳 为 点 、 线 和 面 。 

一 个 按钮 ,一 个 文字 是 一 个 点 。 几 个 按钮 或 者 几 个 文字 的 排列 形成 线 。 线 的 移动 或 
者 数 行文 字 或 者 一 块 空白 可 以 理解 为 面 。 点 、 线 、 面 相互 依存 ,相互 作用 ;可 以 组 合成 各 种 
各 样 的 视觉 形象 ,千变万化 的 视觉 空间 。 

1. 点 的 视觉 构成 

在 网 页 中 ,一 个 单独 而 细小 的 形象 可 以 称 之 为 点 。 点 是 相 比较 而 言 的 ,比如 一 个 汉字 
是 由 很 多 笔画 组 成 的 ,但 是 在 整个 页 面 中 , 它 可 以 称 为 一 个 点 。 点 也 可 以 是 一 个 网 页 中 相 
对 微小 单纯 的 视觉 形象 ,如 一 个 按钮 一 个 Logo 等 。 需 要 说 明 的 是 ,并 不 是 只 有 圆 的 形 
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才 叫 一 个 点 ,方形 ,三 角 、 自 由 形 都 可 以 作为 视觉 上 的 点 ,点 是 相对 线 和 面 而 存在 的 视觉 元 
素 。 点 在 页 面 中 起 到 活泼 生动 的 作用 ,使 用 得 当 , 甚 至 可 以 是 画龙点睛 的 。 一 个 网 页 往往 
需要 由 数量 不 等 .形状 各 异 的 点 来 构成 。 点 的 形状 方向 大小、 位置 .来 集 发 散 ,能 够 给 
人 带 来 不 同 的 心理 感受 。 

点 是 造型 的 基本 要 素 , 也 是 构成 中 最 简洁 的 形态 。 图 形 和 构成 中 的 形象 与 点 是 有 一 
定 面积 .大 小 和 形状 的 。 越 小 的 点 ,点 的 感觉 越 强 , 点 逐渐 增 大 时 , 则 趋向 于 面 的 感觉 ,如 
图 6-1 所 示 的 网 页 版 面 中 ,点 的 运用 尤其 特别 。 





E3 DIREKTIV 


ovant gorde medio 
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E3 DIREKRTIV-AVANT GARDE MEDIA 


"IF SOMETHING LOOKS AND SOUNDS PRETTY COOL, IT PROBABLY I$.." 
JAK-OT 


图 6-1 网 页 版 面 中 * 点 "的 设计 








点 在 网 页 中 的 应 用 : 标志 ,文字 或 图 形 、 按 钮 都 可 作为 点 存在 。 点 是 构成 网 页 的 最 基 
本 单位 ,在 网 页 设计 中 ,经 常 需要 主观 地 加 些 点 ,如 在 新 闻 的 标题 后 加 个 "NEW”, 在 每 小 
行文 字 的 前 面 加 个 方 或 者 圆 的 点 。 

点 的 网 页 构成 : 不 常见 ,版 面 自由 随意 ,轻松 活泼 ,具有 跳跃 感 ,多 用 于 艺术 或 娱乐 类 
网 站 。 

2. 线 的 视觉 构成 

点 的 连接 形成 线 , 线 的 长 度 是 无 限 的 ,是 决定 页 面 现象 的 基本 要 素 。 线 分 为 直线 、 
折线 抛物线、 自由 曲线 、 弧 线 以 及 复合 线 。 线 的 总 体形 状 有 垂直 、 水 平 .倾斜 ,几何 曲 
线 、 自 由 线 几 种 。 线 有 其 性 格 特征 : 带 有 锐角 角度 的 斜 线 具有 动荡 和 速度 的 感觉 ;平行 
方向 的 线 表 现 出 规律 .平稳 ;垂直 线 具有 上 庄严、 挺拔 、 力 量 、 向 上 的 感觉 ;曲线 给 和 人 流畅、 
柔美 的 性 格 特征 。 线 不 仅 分 割 页 面 , 它 还 具有 处 理 面 与 面 之 间 界 限 位 置 的 功能 。 集 中 
的 水 平 线 和 垂直 线形 成 了 稳重 均衡 的 画面 。 斜 线 组 成 锐角 ,使 画面 带 有 动荡 、 不 平衡 
的 感觉 。 

线 与 线 之 间 的 排列 可 以 使 画面 具有 节奏 感 , 线 的 放射 ,粗细 ,渐变 的 排列 可 以 体现 三 
维 空间 的 感觉 。 将 不 同 的 线 在 页 面 中 灵活 地 使 用 ,可 以 获得 各 种 出 人 意料 的 效果 。 

线 在 网 页 中 的 运用 : 线 起 到 分 割 区 域 和 引导 视觉 的 作用 ,其 有 序 排列 和 渐变 会 产生 
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较 强 的 空间 感 。 

线 的 网 页 构成 : 以 线 为 主 的 网 页 构成 要 注意 线 的 空间 关系 及 线 型 ,颜色 .位置 , 方 向 
的 对 比 和 协调 。 

如 图 6-2 页 面 中 重复 使 用 水 平 线 的 排列 形成 一 种 平衡 页 面 的 作用 ,在 中 间 的 一 组 自 
由 线 的 应 用 使 平衡 的 页 面 中 造成 一 种 冲突 ,给 人 视觉 冲击 ,打破 了 水 平 线 带 来 的 呆板 ,使 
页 面 丰富 ,活泼 。 明 确 了 页 面 的 中 心 视觉 点 。 





i % 






de not ich amd “tay” - ick, leah and them tay 


@E 


图 6-2 网 页 版 面 中 * 线 ”的 设计 
































3. 面 的 视觉 构成 

点 的 放大 、 线 的 运动 和 连续 排列 就 产生 了 面 。 相 对 于 点 和 线 ,面具 有 更 强 的 视觉 效果 
和 表现 力 。 面 是 有 形 的 ,因而 也 具有 面积 和 质量 ,占据 空间 的 位 置 更 多 , 比 点 和 线 的 视觉 
冲击 力 更 大 、 更 强烈 。 面 的 形状 可 以 大 体 分 为 : 几何 型 的 面 ( 方 . 圆 ,三 角 、 多 边 形 )、 有 机 
切面 ( 弧 形 的 相交 或 相 切 得 出 ) 和 不 规则 的 面 。 面 可 分 为 几何 形 和 自由 形 两 类 。 

面 的 排列 要 考虑 形状 与 面积 的 对 比 ,间隔 和 面积 的 对 比 、 面 积 与 面积 的 对 比 等 因素 ， 
这 样 页 面 设 计 才能 产生 动感 。 垂 直 、 水 平 的 面 等 距离 地 排列 产生 稳重 ,简单 的 感觉 。 不 同 
面积 .不 同位 置 排列 产生 活泼 ,跳跃 的 感觉 。 

面 在 网 页 中 的 运用 : 大 段 文字 和 大 幅 图 形 是 面 的 常见 形式 ,页 面 边缘 或 空白 处 也 是 
面 的 存在 方式 。 

面 的 网 页 构成 : 以 面 为 主 的 页 面 版 式 效果 饱满 ,充实 ,但 要 注意 相互 的 对 比 和 变化 ， 
突出 页 面 的 主题 。 许 多 大 型 国际 公司 的 页 面 往往 采用 方形 的 面 对 网 页 进行 分 割 , 因 为 方 
形 的 面具 有 沉稳 ,厚重 ,坚强 的 特征 。 在 页 面 中 以 大 段 文字 组 成 方形 的 面 来 分 割 页 面 ,此 
页 面 的 视觉 中 心 以 一 个 亮丽 的 颜色 ,配合 文字 将 重点 信息 完整 强烈 地 表达 出 来 ,如 图 6-3 
所 示 。 

在 网 页 的 版 面 设计 上 ,不 同形 状 的 面 之 间 的 相互 关系 和 整体 的 和 谐 需 要 熟练 把 握 , 合 
理 安排 好 面 的 关系 ,才能 设计 出 充满 美感 ,艺术 ,实用 的 网 页 作品 。 当 在 设计 网 页 时 ,点 线 
面 是 首要 的 考虑 因素 ,要 善于 排列 组 合 它们 之 间 的 关系 ,善于 使 用 点 线 面 表现 不 同 的 形式 
和 情感 ,这 样 才能 设计 出 具有 最 佳 视觉 效果 的 网 页 。 
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CC 中 国人 民 保 险 “5 首页 “网 | 痪 纪 要 户 损 乐 名 找 次 者 关 系 。 关于 人 保 








网 购车 险 
越 优秀 越 优惠 
4999 元 豪 礼 任性 发 
方便， 快捷 ， 省 必 6 
IE 
网 绝 车 险 用 户 mwxs 
A 
意 家 3 Wm een 
ml | (9) 加 
民 忆 党 党 党 
戎 开本 基 雪 如 生活 到 家 有 4 活 出 有 好 人 人 公开 信息 披露 
估 稚 生 尖 中 国 相 外 作 硬 所 再 六 多 好 大洋 和 人 BMD 节理 全 天 但 填 ,让 全 让 OR 
EC Er © RHR 风 
为 什么 选 人 保 ? 
SS i ed 





图 6-3 网 页 版 面 中 * 面 "的 设计 


4. 网 页 上 的 空白 

国画 中 有 一 句 话 描述 这 种 艺术 形式 的 空间 布局 比较 经 典 , 就 是 “ 计 白 当 黑 ”, 表 明了 白 
也 就 是 空 的 地 方 和 着 的 墨 一 样 都 是 国画 整体 的 组 成 部 分 ,如 何 利用 空间 中 的 留 白 是 非 党 
重要 的 ,也 是 提升 艺术 性 的 途径 ,有 些 尽管 是 画 的 很 不 错 , 但 是 看 起 来 不 舒服 ,就 是 没有 重 
视 留 白 ,造成 了 画面 整体 上 的 失败 。 对 于 网 页 设计 来 说 ,又 何尝 不 是 如 此 呢 ? 

提升 到 艺术 的 高 度 来 看 待 留 白 是 通过 视觉 上 的 手段 , 留 白 也 可 以 给 人 带 来 心理 上 
的 轻松 与 快乐 ,还 可 以 给 人 带 来 紧张 与 节奏 感 ,通过 这 种 手段 可 以 向 使 用 者 表达 出 设 
计 者 的 心理 感觉 ,设计 者 在 设计 网 页 的 同时 也 在 同 自己 的 使 用 对 象 在 做 一 种 交流 ,好 
的 设计 者 能 够 达到 同 自己 的 使 用 对 象 进 行 心理 对 话 的 程度 。 不 光 通过 页 面 上 的 文字 、 
图 片 . 动 画 的 组 合 和 排列 ,同时 借助 留 白 进行 表达 。 可 以 达到 非常 好 的 效果 ,例如 一 个 
休闲 的 网 站 ,设计 者 要 传达 给 使 用 者 的 一 个 信息 就 是 要 是 让 他 们 轻松 随意 ,无拘无束 ， 
光 通 过 网 页 上 的 图 片 和 文字 的 表达 是 干巴 巴 的 ,没有 感情 色彩 的 。 如 果 能 通过 网 页 设 
计 反 映 出 这 种 感情 色彩 ,显然 这 样 的 设计 是 较为 高 明 的 设计 。 能 实现 吗 ?” 当然 可 以 ， 
借助 网 页 上 的 留 白 就 可 以 ,让 留 白 更 多 地 显示 出 自己 的 特色 ,在 联系 图 片 和 文字 的 中 
间架 起 一 道 桥梁 ,如 图 6-4 所 示 。 


的 版 式 ) , 它 人 


1( 


年 前 ,我 们 会 发 现 大批 网 这 
域 ,构成 了 这 种 直截了当 的 布局 ,这 前 
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QIORGIO ARMANI 


图 6-4 网 页 版 面 中 的 “ 留 白 ”设计 


6.1.2 网 页 编排 设计 的 基本 形式 


根据 表现 题材 和 前 期 创意 
决定 网 页 中 各 





意 策划 的 要 求 应 该 首先 确定 出 网 页 的 基本 框架 (也 就 是 网 页 
元 素 的 排 布 方式 和 最 终 表 现 风格 


近 十 年 来 ,互联 网 已 经 发 生 了 翻天 覆 地 的 变化 ,然而 它 其 实 一 点 也 没 变 。 如 果 看 看 


站 都 有 一 套 通行 的 排版 模式 。 页 头 、 页 脚 、 侧 边 网 和 内 容 区 
就 是 人 们 预期 中 的 网 页 排版 。 同 时 ,我们 会 发 现 网 页 


的 基本 结构 千变万化 ,根本 没有 固定 形态 , 它 可 以 伸缩 变化 成 任何 所 需 的 东西 。 事 实 上 ， 
网 页 设计 的 新 准则 ,就 是 根本 没有 固定 准则 


当前 


构 ， 


通过 
元 素 。 


疆 





迅速 


表达 
们 


也 是 代表 了 当前 网 页 设 i 


以 下 介绍 几 种 网 页 编排 


的 基本 形式 ,它们 既 可 以 帮助 设计 者 构思 网 页 设计 的 基本 结 





1. 分割 屏幕 


-的 潮流 趋势 


在 这 类 设计 中 ,示例 的 网 站 都 用 了 垂直 分 nt 如 图 6-5 和 图 6-6 所 示 。 


研究 大 量 此 类 案例 ,我 人 
网 页 设计 的 通常 方法 





在 其 中 做 出 选择 。 


] 发 现 ,有 时 候 在 一 套 设 计 中 ,的 确 存 在 两 个 同等 重要 的 主体 
是 按照 重要 性 给 内 容 排序 ,然后 重要 性 会 体现 在 设计 的 层次 





结构 上 。 但 是 假如 就 是 要 推广 两 样 东西 呢 ? 分割 屏幕 的 方式 可 以 突出 两 者 ,并 让 用 户 





同时 ,有 时 需要 表现 出 一 种 重要 的 两 重 性 。 如 图 6-5 所 示 ,Eight and Four 网 站 想 要 




















的 是 ,他 们 的 核心 竞争 力 来 自 植 根 数字 领域 ,还 有 多 才 多 艺 的 员工 ,这 两 点 成 就 了 他 


这 个 团队 。 通 过 屏幕 分 割 


来 表现 这 一 点 ,是 种 令 人 愉快 的 方式 。 
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图 6-5 分 割 屏幕 范例 一 一 Eight and four 网 站 


== WE CNANBE 0UR == 

| rfr | ] 

| 7 有 7 U Co pe ated os 
QUIGKER THAN MOST BANDS . 
圭 HANBE DRUMMERS. 


CHECK DOT OUR NEWEST SEASONAL BRENS 





prste 200-20s ews Pen 
mm bret Pom parr Seen 


图 6-6 分 割 屏 幕 范例 一 一 Dewey's pizza 网 站 


2. 去 界面 化 

网 页 设计 中 的 主要 元 素 之 一 ,就 是 容器 元 素 : 方块 .边框 ,形状 和 所 有 类 型 的 容器 ,用 
于 将 内 容 从 页 面 中 分 离开 。 想 象 一 个 古板 的 页 头 , 元 素 刚 好 容纳 其 中 ,与 内 容 分 隔 开 。 如 
今 的 一 项 普遍 趋势 ,就 是 去 除 所 有 这 些 额外 的 界面 元 素 。 这 是 种 极 简 主义 的 方式 ,但 它 更 
进一步 , 带 来 一 些 有 趣 的 转变 。 

如 图 6-7 所 示 ,Brtime 网 站 把 页 头 和 页 尾 的 概念 统统 去 掉 了 。 反 而 更 像 一 个 交互 式 
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杂货 挫 。 从 左 向 右 的 排列 ,就 基本 完成 了 内 容 层次 的 排 布 ,有 助 于 让 排版 更 加 直观 。 用 于 
分 隔 导 航 和 内 容 的 界面 就 不 需要 了 ,取而代之 的 是 漂亮 的 产品 惊艳 全 场 。 





图 6-7 去 界面 化 范例 一 一 Br-time 网 站 


可 以 发 现 , 移 除 任何 感官 上 的 页 头 和 页 尾 后 ,内 容 得 到 了 极 大 的 强调 。 用 户 会 先 看 到 
公司 名 称 , 然 后 是 关于 他 们 经 营 内 容 ( 和 场所 ) 的 清晰 描述 ,而 不 是 先 看 到 页 头 、 主 导航 。 
让 用 户 浏览 之 前 先 重 点 强调 品牌 的 方式 非常 有 效 ,造就 了 优美 的 视觉 流程 。 如 图 6-8 所 
示 , 来 自 于 Havard Art Museums 网 站 。 


Harvard /A Sev, 
Art Museums 








Special Event 
Wednesday, January 14, 2015 
Innovations: The Harvard Rothko 
Murals Project 














图 6-8 去 界面 化 范例 一 一 Havard Art Museums 网 站 
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3. 基于 模块 或 网 格 

这 种 编排 方式 建立 在 模块 化 或 类 似 网 格 的 结构 上 。 在 这 些 设计 中 ,利用 响应 式 设计 ， 
每 个 模块 都 可 以 根据 屏幕 尺寸 伸缩 调整 。 它 体现 了 一 种 自 适应 布局 模式 ,可 以 像 搭 积木 
一 样 ,由 各 种 模块 组 件 创建 而 成 。 

如 图 6-9 所 示 ,Team Bad Company Rowing 网 站 完美 地 诠释 了 这 一 点 。 整 个 设计 都 
是 响应 式 的 。 随 着 屏幕 尺寸 的 变化 ,每 个 模块 都 改变 尺寸 来 适应 空间 。 均 匀 划 分 屏幕 使 
得 设计 更 易于 适应 。 他 们 还 在 大 屏幕 尺寸 中 引入 一 些 元 素来 打破 模块 界限 的 束缚 ,这 是 
画龙点睛 之 笔 。 同 样 的 设计 体现 在 Guide. residence-mixte 网 站 中 ,如 图 6-10 所 示 。 
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图 6-9 基于 模块 或 网 格 范例 一 一 Team Bad Company Rowing 网 站 
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图 6-10 ”基于 模块 或 网 格 范例 一 一 Guide. residence-mixte 网 站 
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4. 一 屏 以 内 

有 一 些 网 站 采用 这 样 的 方式 ,让 设计 完全 在 一 屏 内 展现 。 在 这 种 编排 方式 中 ,整个 设 
计 的 适应 方式 完 完全 全 吻合 屏幕 ,没有 产生 滚动 条 。 没 有 滚动 ,意味 着 内 容 必 须 极度 聚 
焦 ,而 且 要 建立 清晰 的 内 容 层次 。 我 们 会 发 现 这 些 网 站 的 聚焦 能 力 和 清晰 程度 令 人 耳目 
一 新 ,如 图 6-11 和 图 6-12 所 示 。 























erikfischer 








图 6-11 一 屏 以 内 范例 一 一 erikfischer 网 站 


Building the Web. 


Fol service front-end design & development 


2 By > 
I shello Latkolryiecney errii 


人 


图 6-12 一 屏 以 内 范例 一 一 Nikolay lecheev 网 站 


多 种 网 页 编排 形式 都 可 以 表现 为 积木 块 的 形式 ,这 些 积木 可 以 通过 很 多 不 同方 式 组 
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合 。 现 代 网 页 的 布局 如 此 多 样 化 ,而 且 确 实 合乎 使 用 ,造就 了 如 此 激动 人 心 的 互联 网 
媒体 。 


6.2 网 页 中 的 文字 编排 





在 网 页 设计 工作 中 ,大 家 总 习惯 将 重点 放 在 图 片 和 布局 上 。 但 实际 上 ,文字 是 网 页 信 
息 传播 的 重要 组 成 部 分 ,思考 如 何 让 文字 更 易于 阅读 ,是 和 图 片 、 布 局 处 理 同等 甚至 更 为 
重要 的 问题 。 


6.2.1 文字 内 容 区 域 


首先 ,在 书籍 编排 过 程 中 , 设 定 页 面 四 周 的 余 白 来 安排 页 面 的 排版 。 页 边 空白 的 大 
小 不 同 ,排版 效果 给 读者 带 来 的 印象 也 会 发 生变 化 ,因此 
需要 适当 地 进行 处 理 。 显 然 纸 质 书 籍 的 版 面 设 定理 论 ， 
并 不 适合 于 显示 在 数字 硬件 设备 上 。 因 此 我 们 需要 根据 
不 同 的 媒体 特点 来 进行 处 理 。 如 图 6-13 所 示 , 有 颜色 的 
部 分 是 文字 版 面 ,abed 版 面 为 文字 四 周 的 余 白 ,abck 版 面 








b 


标准 的 设 定 通 常 是 按照 1 : 1.2 : 1 : 1.7 的 比例 来 进行 ”|e a 
设计 的 。 

6.2.2 字体 大 小 设置 

其 次 是 文字 的 字体 大 小 ,标题 的 字号 要 大 ,正文 的 字 | d 








号 要 小 ,文字 的 大 小 要 根据 它 的 作用 灵活 设 定 。 在 版 面 设 
计 中 ,首先 要 确定 正文 字体 大 小 ,只 有 确定 了 正文 字体 大 图 6-13 内容 区 域 与 四 边 余 白 
小 ,才能 根据 它 来 调节 平衡 ,决定 大 标题 .小 标题 以 及 注释 
文字 大 小 。 

图 6-14 是 适用 于 正文 文字 大 小 的 图 例 , 左 侧 是 宋体 文字 大 小 图 例 , 右 侧 是 黑体 文字 
大 小 图 例 。 即 便 是 相同 大 小 的 文字 ,字体 不 同 ,看 起 来 大 小 也 不 一 样 。 而 且 选 择 文字 大 小 
时 ,需要 考虑 网 页 的 阅读 方式 ,例如 ,是 在 大 屏幕 机 器 还 是 小 屏幕 。 





12px 。 网易 云 阅读 12px 网 号 云朵 读 

14px ”网 易 云 阅读 14px ”网 易 云 阅读 
18px 网 易 云 阅读 18px ”网 易 云 阅 读 
24px 网 易 云 阅读 2px 网 易 云 阅读 


smx 网 易 云 阅 读 smx 网 易 云 阅 读 


图 6-14 相同 字号 不 同 字体 浏览 效果 
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6.2.3 行 对 齐 


排版 中 重要 的 一 条 ,是 把 应 该 对 齐 的 部 分 对 齐 , 例 如 每 一 个 段落 的 字 行 对 齐 , 就 
是 把 行 的 位 置 进行 对 齐 使 其 一 致 的 方法 。 行 头 对 齐 是 所 有 行 均 在 行头 对 齐 的 方法 ， 
如 图 6-15 所 示 。 虽 说 这 种 用 法 使 得 行 尾 不 齐整 ,但 方便 文章 的 停顿 部 分 换行 ,适用 
于 散文 .诗歌 等 表现 韵味 的 文字 版 式 。 但 是 ,对 于 编排 长 篇 文章 时 ,选择 左右 对 齐 更 
能 体现 条 理性 。 由 于 换行 的 位 置 都 相同 ,阅读 行头 或 换行 的 时 候 视线 能 够 平缓 流畅 
地 移动 。 





有 你 的 ， 我 有 我 的 ， 方 向 ， 切 皆 有 价 的 写作 基于 一 个 
记得 也 好 ， 性 的 观点 还 是 喝 咖啡 投资 
好 你 忘掉 ， 下 载 音乐 都 是 权衡 利 浆 和 
交会 时 互 放 的 光亮 ! 代价 的 过 程 ， 即 世间 一 切 


图 6-15 行头 对 齐 与 左右 对 齐 


6.2.4 行 间距 的 设 定 


行 高 , 行 间距 的 大 小 对 文章 的 易 读 性 有 很 大 的 影响 。 行 与 行 之 间 拉 得 过 开 , 从 一 行 末 
尾 移动 到 下 一 行 开头 ,视线 的 移动 距离 过 长 增加 了 阅读 难度 。 相 反 , 行 与 行 之 间 贴 得 过 
紧 , 上 下 挨 得 过 紧 影 响 了 视线 的 移动 ,让 人 不 知道 正在 阅读 哪 一 行 。 正 文 最 恰当 的 行 高 ， 
基本 应 该 设 定 为 其 文章 中 文字 大 小 的 两 倍 。 例 如 文字 大 小 为 8px 的 文章 ,就 应 该 把 行 高 
设 定 为 16px, 如 图 6-16 所 示 。 


图 6-16 行 高 与 行 间距 
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6.3 网 站 的 色彩 选择 与 搭配 





6.3.1 网 页 色彩 的 选择 


第 一 印象 决定 一 切 ! 大 家 都 可 以 从 各 自 的 外 表 上 大 概 看 出 一 个 人 的 性 格 。 同 样 地 ， 
这 个 理论 也 可 以 延伸 到 设计 工作 里 。 影 响 设计 工作 的 因素 有 很 多 ,但 是 第 一 时 间 被 关注 
到 的 应 该 是 颜色 。 颜 色 反映 了 设计 的 整体 感觉 ,有 时 候 单 赁 颜色 就 可 以 调度 起 一 个 人 的 
情绪 ,情感 甚至 回忆 。 

不 同 的 颜色 组 合适 合 不 同 的 作品 ,而 且 这 种 类 似 固定 搭配 的 组 合 规则 并 不 能 轻易 被 
打破 。 不 同 的 颜色 会 给 人 们 不 同 的 心理 感受 ,设计 网 页 时 ,要 结合 主题 的 需要 选择 不 同 的 
色彩 。 

1. 红色 

红色 是 代表 爱情 和 激情 的 颜色 。 情 人 节 的 礼物 通常 都 有 一 个 红色 的 盒子 ,或 者 是 粉 
红色 ,也 就 是 添加 一 些 白色 的 红色 。 红 色 也 代表 愤怒 和 血液 。 在 火焰 中 可 以 同时 找到 红 
色 ,橙色 和 黄色 。 红 色 也 表示 危险 ,所 以 很 多 表示 停止 的 标识 牌 都 是 红色 的 ,因为 红色 可 
以 很 好 地 吸引 人 们 的 注意 。 红 色 是 很 强势 的 颜色 , 当 它 和 其 他 颜色 相遇 时 ,例如 搭配 黑 
色 , 可 以 创建 非常 强势 的 感觉 。 红 色 可 以 搭配 一 些 严肃 的 语气 和 强硬 的 命令 。 

2. 杰 色 

橙色 代表 了 温暖 ,但 是 并 不 像 红 色 那 样 唱 吊 逼 人 。 杜 色 能 够 创建 一 个 有 趣 的 氛围 , 因 
为 它 充满 了 活力 ,而 且 柳 色 创造 出 的 活跃 气氛 并 没有 危险 的 感觉 。 枪 色 可 以 与 一 些 健康 
产品 搭 上 关系 ,例如 维生素 C ,毕竟 橙子 里 也 有 很 多 维生素 C。 

3. 黄色 

提 到 黄色 ,经常 可 以 联想 到 太阳 和 温暖 。 使 用 橙色 的 时 候 , 可 以 创造 出 一 种 夏天 的 好 
玩 的 感觉 ,黄色 则 带 给 人 口 渴 的 感觉 ,所 以 经 常 可 以 在 卖 饮 料 的 地 方 看 到 黄色 的 装饰 。 黄 
色 也 可 以 和 情 弱 与 恐惧 联系 起 来 ,这 是 因为 以 前 “yellow” 这 个 词 代表 着 这 个 意思 。 当 黄 
色 与 黑色 搭配 在 一 起 时 ,十 分 吸引 人 的 注意 力 ,一 个 绝 佳 的 例子 就 是 很 多 国家 的 出 租车 都 
采用 这 种 配色 。 

4. 绿色 

在 西方 国家 ,绿色 是 钱 的 颜色 ,这 与 他 们 的 文化 和 财富 有 关 。 因 为 大 多 数 植物 都 是 绿 
色 的 。 绿 色 也 代表 着 经 济 增长 和 健康 。 绿 色 经 常用 作 一 些 保健 食品 的 Logo, 因为 看 起 来 
就 十 分 贴近 自然 。 绿 色 还 意味 着 利润 和 收益 。 如 果 搭配 上 蓝 色 , 通 常会 给 人 健康 、 清 洁 、 
生活 和 自然 的 感觉 。 

5. 蓝 色 

蓝 色 是 一 个 神奇 的 颜色 ,因为 不 同 明度 的 蓝 色 会 给 人 不 同 的 感受 ,想法 和 情绪 。 深 蓝 
色 可 以 给 人 一 种 悲伤 的 感觉 ,让 人 联想 起 伤心 时 怎么 听 都 不 够 的 蓝调 音乐 。 而 浅 蓝 色 则 
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通常 会 让 人 联想 起 天 空 和 水 ,给 人 以 提神 .自由 和 平静 的 感觉 。 蓝 天 永远 都 是 平静 的 ,水 
流 可 以 冲 走 泥土 ,清洗 伤口 ,所 以 蓝 色 也 代表 着 新 鲜 和 更 新 。 蓝 色 给 人 冷静 的 感觉 ,会 
助人 放松 下 来 。 

6 紫色 

紫色 总 是 让 人 不 禁 想 起 皇室 成 员 的 长 袍 。 紫 色 可 以 更 多 地 与 浪漫 .亲密 、 柔 软 舒 适 的 
质感 产生 联系 。 紫 色 给 人 一 种 奢华 的 感觉 ,也 有 一 种 神秘 感 。 

7. 和 白色 

白色 通常 与 医院 联系 在 一 起 ,因为 医生 们 都 是 穿着 白 大 衬 的 ,而 且 医 院内 部 的 装修 通 
常 也 是 白色 的 。 此 外 ,宗教 绘画 有 时 候 也 是 没有 色彩 的 ,白色 也 代表 着 圣洁 。 白 色 通常 给 
人 干净 的 感觉 ,比如 白色 的 床单 和 衣服 都 让 人 感觉 很 干净 。 也 可 以 代表 棉花 和 柔软 的 云 
打 。 心 理 健康 相关 的 事物 也 可 以 选用 白色 ,白色 也 同样 适用 于 卫生 清洁 相关 的 设计 。 

8. 黑色 

黑色 通常 与 死亡 有 关 , 尤 其 是 在 美国 。 它 可 以 代表 腐 坏 ,因为 很 多 食物 腐 坏 变 质 以 后 
就 是 黑色 的 。 黑 色 也 代表 那 恶 ,因为 是 白色 的 对 立 颜 色 , 而 白色 通常 代表 着 纯洁 美好 善 
良 。 黑 暗 和 未 知 也 会 给 人 焦虑 的 感觉 。 很 多 图 像 中 ,黑色 表达 了 抑郁 .绝望 和 孤独 。 虽 然 
黑色 有 很 多 负面 的 含义 ,但 是 黑色 也 是 一 个 万 能 色彩 , 当 黑色 遇 上 其 他 颜色 的 时 候 会 产生 
其 他 的 意义 。 例 如 当 黑 色 邂 后 金黄 色 , 就 可 以 给 人 一 种 奢华 、 高 档 的 感觉 ; 当 黑 色 偶 遇 银 
灰色 , 则 会 给 人 一 种 成 熟 稳重 的 感觉 。 


6.3.2 网 页 色彩 搭配 的 原理 


在 网 页 配色 中 ,不 要 将 所 有 的 颜色 都 用 到 ,尽量 控制 在 三 种 色彩 以 内 ,背景 色 和 前 景 
文字 的 对 比 尽量 要 大 ,以 便 让 文字 看 起 来 更 清晰 。 

随 着 网 页 制作 经 验 的 积累 ,网 页 用 色 有 这 样 的 一 个 趋势 : 单 色 一 五 彩 缤纷 一 标准 色 一 
单 色 。 一 开始 因为 技术 和 知识 缺乏 ,只 能 制作 出 简单 的 网 页 ,色彩 单一 ;在 有 一 定 基础 和 材 
料 后 ,希望 制作 一 个 漂亮 的 网 页 ,将 自己 收集 的 最 好 的 图 片 最 满意 色彩 堆砌 在 页 面 上 ;但 是 
时 间 一 长 , 却 发 现 色彩 杂乱 ,没有 个 性 和 风格 ;第 三 次 重新 定位 自己 的 网 站 ,选择 好 切合 自己 
的 色彩 ,推出 的 站 点 往往 比较 成 功 ; 当 最 后 设计 理念 和 技术 达到 顶峰 时 , 则 又 返 珊 归 真 ,用 单 
一 色彩 甚至 非 彩色 就 可 以 设计 出 简洁 精美 的 站 点 。 

网 页 色彩 搭配 的 技巧 如 下 。 

1. 用 一 种 色彩 

这 里 是 指 先 选 定 一 种 色彩 ,然后 调整 透明 度 或 者 他 和 度 ,也 就 是 将 色彩 变 淡 或 加 深 ， 
产生 新 的 色彩 ,再 用 于 网 页 。 这 样 的 页 面 看 起 来 色彩 统一 ,并 且 具 有 层次 感 。 

2. 用 两 种 色彩 

先 选 定 一 种 色彩 ,然后 选择 它 的 对 比 色 。 例 如 用 蓝 色 和 黄色 。 整 个 页 面色 彩 丰 富 但 
不 花哨 。 
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3. 用 一 个 色 系 

简单 地 说 就 是 用 一 个 感觉 的 色彩 ,例如 淡 蓝 、 淡 黄 、 淡 绿 ;或 者 土 黄土 灰 、 土 蓝 。 确 定 
色彩 的 方法 各 人 不 同 ,可 以 在 图 像 处 理工 具 Photoshop 的 拾 色 器 中 选择 。 

4. 用 黑色 和 一 种 彩色 

比如 大 红 的 字体 配 黑色 的 边框 ,就 感觉 对 比 很 强烈 。 

在 网 页 配色 中 ,忌讳 的 是 : 

。 不 要 将 所 有 颜色 都 用 到 ,尽量 控制 在 三 种 色彩 以 内 。 

。 背景 和 前 文 的 对 比 尽量 要 大 ,尽量 不 要 用 花纹 繁复 的 图 案 作 背景 ,以 便 突 出 主要 

文字 内 容 。 

在 设计 的 时 候 应 该 慎重 地 考虑 和 选用 颜色 。 通 过 不 同 的 颜色 ,可 以 创造 出 不 同感 觉 
的 图 像 。 合 适 的 组 合 可 以 获得 关注 ,通过 视觉 传达 设计 师 所 想 ,进一步 拉 近 设计 师 与 观众 
的 距离 ,让 图 像 更 具 力 量 。 





本 章 实 训 
【 实 训 1] 
构思 个 人 网 站 的 首页 布局 ,并 在 白 纸 上 绘制 其 草图 。 
【 实 训 2】 


根据 个 人 网 站 的 主题 ,在 Internet 中 查找 相似 主题 的 网 站 ,分 析 其 主 色调 及 色彩 搭配 


情况 。 
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7.1 Web 标 准 


几 年 前 ,流行 使 用 表格 来 进行 网 页 的 布局 和 排版 ,但 这 种 方式 目前 已 淡出 设计 舞台 ， 
取而代之 的 是 符合 Web 标准 的 Div 十 CSS 布局 方式 。 

Web 标准 不 是 某 一 个 标准 ,而 是 一 系列 标准 的 集合 。 网 页 主要 由 三 部 分 组 成 : 结构 
(Structure) 表现 (Presentation) 和 行为 (Behavior)。 对 应 的 标准 也 分 为 三 个 方面 : 结构 
化 标准 语言 ,主要 包括 XHTML 和 XML; 表 现 标准 主要 包括 CSS; 行 为 标准 主要 包括 对 
象 模 型 (如 W3C DOM) 和 ECMAScript 等 。 这 些 标准 大 部 分 由 W3C 起 草 和 发 布 ,也 有 一 
些 是 其 他 标准 组 织 制定 的 标准 ,如 ECMA(European Computer Manufacturers Association) 的 
ECMAScript 标准 。 

所 谓 符合 Web 标准 的 布局 就 是 表现 和 结构 相 分 离 的 设计 方式 ,内 容 是 页 面 实际 要 传 
达 的 真正 信息 ,包含 数据 ,文档 或 图 片 等 。 用 来 改变 内 容 外 观 的 东西 , 称 之 为 表现 ”, 比 如 
修饰 文字 的 大 小 .颜色 ,边框 等 。 

对 于 内 容 、 结 构 和 表现 相 分 离 , 最 早 是 在 软件 开发 架构 理论 中 提出 来 的 。 用 过 QQ 的 
人 都 知道 ,QQ 面板 的 皮肤 变更 但 内 容 却 保持 不 变 , 仅 是 外 观 在 变化 。 

Div 十 CSS 的 页 面 布局 不 仅仅 是 设计 方式 的 转变 ,而 且 是 设计 思想 的 转变 。 虽 然 在 设 
计 中 使 用 的 元 素 依然 没有 改变 ,在 旧 的 表格 布局 中 ,也 会 使 用 到 Div 和 CSS, 但 它们 却 没 
有 被 用 于 页 面 布局 。 这 一 转变 为 网 页 设计 带 来 了 许多 便利 。 

在 以 前 我 们 制作 网 站 时 ,总 是 习惯 于 先 考 虑 外 观 、 颜 色 .字体 及 布局 等 所 有 表现 在 页 
面 上 的 内 容 。 但 实际 上 ,外 观 并 不 是 最 重要 的 ,相反 最 终 用 户 在 访问 网 页 时 的 体验 才 是 优 
先 要 考虑 的 。 一 个 由 Div 十 CSS 布局 且 结构 良好 的 页 面 可 以 通过 CSS 定义 成 任何 外 观 ， 
在 任何 网 络 设备 (包括 手机 、PDA 和 计算 机 ) 上、 以 任何 外 观 表 现 出 来 ,而 且 用 Div 十 CSS 
布局 构建 的 网 页 能 够 简化 代码 ,加 快 显示 速度 。 

所 以 要 想 学 好 Div 十 CSS ,首先 要 转变 观念 ,需要 抛弃 传统 的 表格 布局 方式 ,采用 层 
(Div) 布 局 ,并 且 使 用 层 释 样式 表 (CSS) 来 实现 页 面 的 外 观 。 给 网 站 浏览 者 更 好 的 体验 。 

Dreamweaver 是 全 面 支持 Div 十 CSS 并 且 符 合 Web 标准 的 网 页 设计 工具 。 在 
Dreamweaver 中 可 以 实现 可 视 化 CSS 布局 ,这 使 得 网 页 设计 更 为 简单 ,效率 更 高 。 为 了 
方便 初学 者 进行 设计 ,Dreamweaver 还 提供 了 一 些 现成 的 模板 ,可 以 直接 在 网 页 中 应 用 。 
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当然 ,对 于 熟练 的 用 户 可 以 采用 自 定义 方式 进行 布局 。 
7.2 使 用 Div 


在 网 页 设计 中 ,由 于 层 具 有 很 强 的 灵活 性 ,因此 被 广泛 应 用 ,利用 层 不 仅 可 以 精确 设 
置 对 象 的 位 置 ,还 能 实现 一 些 简 单 的 效果 。 


7.2.1 什么 是 Div 


Div( 层 ) 是 一 种 HTML 页 面 元 素 ,可 以 将 它 定位 在 页 面 上 的 任意 位 置 。Div 元 素 是 
用 来 为 网 页 内 容 提 供 结构 和 背景 的 块 元 素 。Div 可 以 包含 文本 、 图 像 或 其 他 HTML 文 
档 。 层 的 出 现 使 网 页 从 二 维 平面 拓展 到 三 维 ,可 以 使 页 面 上 元 素 进 行 重合 和 复杂 的 布局 。 
在 普通 网 页 中 ,所 有 对 象 都 是 静止 的 固定 不 动 的 ,只 有 层 是 可 以 随意 移动 的 对 象 。 

如 果 将 文本 表格、 图 像 和 动画 等 这 些 无 法 移动 的 元 素 放 入 层 中 ,那么 它们 也 将 变 成 
可 以 移动 的 对 象 。 

通过 CSS 和 网 页 脚本 可 以 使 网 页 中 的 层 出 现 位 置 , 大 小 颜色 以 及 背景 等 的 变化 。 
此 外 ,利用 其 特性 ,还 可 以 创建 各 种 形式 的 层 动画 。 

通过 Div, 可 以 把 页 面 分 隔 成 独立 不同 的 部 分 ,使 网 页 内 容 结 构 化 ,模块 化 ,如 图 7-1 
所 示 。 





7-1 Div 布局 


7.2.2 层 的 基本 操作 


1. 在 Dreamweaver 中 插入 层 
(1) 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 Div 按钮 。 
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(2) 此 时 将 打开 “插入 Div "对话 框 , 如 图 7-2 所 示 。 




















插入 Div 
插入 [| + 
Class: 村 公开 敬之 后 
ID， 三 兰 结 来 之 前 
新 建 Css 规则 | 








dl 


























图 7-2 “插入 Div” 对 话 框 


其 中 : 
。，“ 插 入 ”下 拉 菜 单 : 


4 在 插入 点 : 在 光标 放置 的 位 置 上 插入 <<div 之 标签 。 
4 在 开始 标签 之 后 : 在 <<body> 标 签 的 后 面 插入 <div 之 标签 。 
4 在 结束 标签 之 前 : 在 </body> 结 束 标签 的 前 面 插入 <div 之 标签 。 
。 Class: 选择 一 个 CSS 的 类 ,将 样式 应 用 至 该 Div。 
。 ID: 选择 一 个 CSS 的 ID ,将 样式 应 用 至 该 Div。 
。“ 新 建 CSS 规则 ?按钮 : 单 击 此 按钮 ,会 打开 “新 建 CSS 规则 ?对 话 框 。 使 用 "新 建 
CSS 规则 ”, 可 以 添加 <<div 之 标签 的 类 和 ID。 
(3) 单 击 “ 确 定 ” 按 钮 , 即 可 在 指定 位 置 插入 一 个 Div。Dreamweaver 会 将 Div 显示 为 
一 个 虚线 框 ,并 自动 在 框 内 添加 占 位 符 内 容 “ 此 处 显示 新 Div 标签 的 内 容 ”, 帮 助 我 们 定位 
Div 的 位 置 ,提示 该 Div 的 可 编辑 区 域 。 不 难 发 现 ,默认 情况 下 的 Div 没有 任何 效果 , 必 
须 为 其 添加 CSS 样式 后 ,才能 美化 效果 或 实现 布局 。 单 击 虚线 框 后 ,Dreamweaver 会 将 
Div 变 成 蓝 色 的 实 线 框 ,如 图 7-3 所 示 , 通 过 属性 面板 ,还 可 为 其 添加 CSS 的 类 或 指定 


CSS 的 ID, 如 图 7-4 所 示 。 







机 | 拆 分 | 设计 天才 天 全 村 本 语 虹 
处 远东 新 Div 标 伴侣 | 












ED Wy [二 :2 
图 7-3 在 网 页 中 插入 Div 














7-4 Div 的 属性 面板 


hl 
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2. 创建 嵌 套 层 


与 表格 一 样 , 层 也 可 以 进行 嵌 套 ,在 某 个 层 内 部 创建 的 层 为 嵌 套 层 , 也 称 为 子 层 , 赂 套 
层 外 部 的 层 称 为 父 层 。 在 Dreamweaver CC 中 ,创建 嵌 套 层 的 方法 如 下 。 

(1) 按照 上 述 方法 创建 ID 为 "main” 的 父 层 ,删除 其 占 位 符 文本 ,将 插入 点 定位 在 Div 
内 ,如 图 7-5 所 示 。 





7-5 光标 停留 在 父 层 中 


(2) 再 次 打开 “插入 Div "对话 框 ,插入 ”下拉 菜单 选择 为 “在 插 和 人 点 ”, 添 加 一 个 ID 为 
“content” 的 嵌 套 层 , 如 图 7-6 所 示 。 














图 7-6 创建 嵌 套 层 


(3) 单 击 “* 确 定 ? 按 钮 ,在 返回 的 设计 视图 中 即 可 查看 插入 嵌 套 层 后 ,在 其 中 显示 的 默 
认 的 占 位 符 内 容 * 此 处 显示 id "content" 的 内 容 ”, 如 图 7-7 所 示 。 

单 击 * 代 码 ? 按 钮 切换 到 代码 视图 ,在 其 中 可 以 更 直观 地 查看 创建 的 嵌 套 层 结构 ,如 
图 7-8 所 示 。 
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图 7-7 典 套 层 占 位 符 文本 


9 «<div id="main"> 到 
末 <div id="content"> 此 处 显示 id "content" 的 内 容 </div> 
</div> 


图 7-8 代码 视图 显示 Div 的 调 套 


7.3 Div+Css 布局 





7.3.1 Div 十 CSS 的 布局 优势 


随 着 Web 标准 化 设计 的 普及 ,现在 许多 网 站 已 经 纷纷 采用 Div 十 CSS 的 布局 结构 ， 
它 区 别 于 传统 的 表格 定位 形式 ,采用 以 * 块 元 素 "的 定位 方式 ,用 最 简洁 的 代码 实现 精准 的 
定位 。 

1. 使 页 面 更 快 载 入 

由 于 大 部 分 的 代码 都 在 CSS 中 ,使 得 HTML 页 面 中 的 代码 减少 ,体积 容量 也 相对 减 
小 。 相 对 于 表格 嵌 套 的 方式 ,Div 十 CSS 把 页 面 分 成 了 多 个 区 块 ,在 打开 页 面 时 ,是 逐 层 加 
载 的 ,而 不 像 表 格 那样 ,将 页 面 装 在 一 个 大 表格 内 ,加 载 缓慢 。 

2. 网 站 改版 更 加 容易 

不 用 重新 设计 和 排版 网 页 ,也 不 用 改变 原 网 站 上 的 任何 HTML 和 网 站 页 面 ,只 需要 
重新 编写 CSS 文件 ,再 用 新 的 CSS 文件 覆盖 以 前 的 CSS 即 可 实现 改版 。 
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3. 内 容 和 形式 分 离 

CSS 最 大 的 优势 是 实现 了 内 容 和 形式 的 分 离 , 网 页 前 台 只 需 显示 内 容 ,而 形式 上 的 
美化 只 需要 交 给 CSS 来 处 理 即 可 ,最 后 生成 的 HTML 文件 代码 更 加 精简 。 

4. 降低 流量 费用 

页 面 的 代码 简洁 了 ,体积 也 相对 变 小 ,对 于 大 型 网 站 来 说 ,可 以 节省 大 量 带宽 ,而 且 众 
所 周知 ,搜索 引擎 最 喜欢 的 就 是 简洁 的 代码 。 

5. 对 浏览 器 更 具 亲 和 力 

由 于 CSS 的 样式 非常 丰富 ,使 页 面 也 变 得 更 加 的 灵活 , 它 是 被 众多 浏览 器 支持 的 最 
完善 的 版 本 ,可 以 根据 不 同 的 浏览 器 设置 ,而 达到 显示 效果 统一 不 变形 。 同 时 ,为 了 更 好 
地 支持 搜索 引擎 的 抓 取 ,最 好 使 用 Div 十 CSS 的 结构 方式 来 布局 页 面 。 但 是 ,Div 十 CSS 
的 布局 方式 相对 于 表格 布局 ,开发 设计 时 间 更 长 ,设计 复杂 度 也 提高 了 不 少 ,同时 ,CSS 
的 文件 异常 会 影响 到 整个 网 站 。 


7.3.2 禽 模 型 


CSS 的 盒 模型 (Box Model) 对 于 后 继 章 节 介绍 的 层 布 局 很 有 帮助 。 盒 模型 在 网 页 设 
计 中 是 一 个 非常 重要 的 概念 ,虽然 CSS 中 没有 真正 意义 上 的 盒子 ,但 它 却 是 CSS 中 无 处 
不 在 的 一 个 组 成 部 分 。 

每 个 网 页 元 素 都 可 以 看 作 是 一 个 装 了 东西 的 盒子 ,盒子 里 面 的 内 容 到 盒子 边框 之 间 
的 距离 即 为 填充”, 盒 子 本 身 有 “边框 ”而 盒子 边框 外 和 其 他 盒子 之 间 , 还 有 "边界 "。 在 
现实 生活 中 ,假设 在 一 个 广场 上 ,把 不 同 大 小 和 颜色 的 盒子 以 一 定 的 间隙 和 顺序 摆 放 好 ， 
最 后 从 广场 上 空 往 下 看 ,看 到 的 图 形 和 结构 就 类 似 将 要 做 的 网 页 版 面 设 计 了 ,如 图 7-9 
所 示 。 





MARGIN 边界 
BORDER 框 边 
PADDING 





Xxog 














7-9 盒 模型 图 解 


填充 .边框 和 边界 都 分 为 上 右 下 左 ?4 个 方向 , 既 可 以 分 别 定义 ,也 可 以 全 部 相同 。 
CSS 内 定义 的 宽 和 高 , 指 的 是 盒子 里 具体 内 容 的 宽 和 高 ,也 就 是 填充 以 内 的 内 容 范 围 , 因 
此 一 个 元 素 实际 宽度 二 左边 界 十 左边 框 十 左 填充 十 内 容 宽度 十 右 填 充 十 右边 框 十 右边 
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界 。 实 际 高 度 = 上 边界 十 上 边框 十 上 填充 十 内 容 高 度 十 下 填充 十 下 边框 十 下 边界 。 
7.3.3 仿 模 型 实例 


例如 有 如 下 ID 为 “main” 的 Div 设置 了 “布局 ”和 * 边 框 >, 如 图 7-10 和 图 7-11 所 示 。 


口 边框 
border :10pxsolld #0770EF 
口 


= 








图 7-10 “布局 "定义 样式 图 7-11 “边框 ?定义 样式 


则 该 Div 实际 宽度 如 图 7-12 所 示 。 





总 宽度 = 20px + 10px+ 40px+ +50px+10px+ 20px 
图 7-12 元 素 总 宽度 的 计算 


Div 的 预览 效果 如 图 7-13 所 示 。 
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图 7-13 Div 的 预览 效果 


7.4 综合 案例 


7.4.1 项 目 说 明 


下 面 同样 将 以 “黑白 摄影 ”为 主题 ,使 用 Div 十 CSS 布局 制作 一 张 图 文 并 茂 的 网 页 。 

页 面 的 布局 分 为 横向 的 4 栏 ,简单 草图 如 图 7-14 
所 示 。 分 栏 结构 主要 包含 “网 页 标题 “导航 条 ”、4 块 网 页 标题 
内 容 分 区 及 页 尾 的 “版 权 信 息 ”。 导航 条 


7.4.2 设计 过 程 


需要 重视 的 是 Web 标准 中 结构 与 表现 及 行为 分 
离 的 设计 概念 ,如 此 才能 真正 地 为 设计 带 来 许多 便 
利 。 采 用 Web 标准 来 设计 网 页 ,简化 了 设计 过 程 , 并 
且 使 网 页 的 结构 更 为 清晰 ,可 读 性 增强 ; 同时 还 能 创 
建 出 漂亮 的 页 面 效果 。 作 为 网 页 设计 工具 的 
Dreamweaver, 全 方位 地 提供 了 支持 ,让 设计 工作 变 得 
更 轻松 有 效 。 

1. 设计 网 页 内 容 图 7-14 布局 草图 

(1) 添加 最 外 层 居中 Div 

由 于 网 页 最 后 的 效果 是 整体 居中 的 ,所 以 需要 设置 一 个 固定 宽度 的 Div 作为 最 外 层 




















内 容 1 内 容 2 








内 容 3 内 容 4 





























版 权 信息 
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的 容器 ,包含 网 页 中 的 所 有 内 容 ,如 图 7-15 所 示 , 创 建 一 个 ID 为 "main” 的 Div。 

















图 7-15 创建 最 外 层 Div 


(2) 创建 页 面 标 题 
输入 网 页 标题 文字 ,并 设置 为 “标题 1” 格 式 ,如 图 7-16 所 示 。 














7-16 设置 标题 


(3) 添加 导航 条 

在 Div 十 CSS 的 布局 设计 中 ,导航 条 将 使 用 列表 格式 ,本 例 中 创建 了 一 个 具有 6 个 项 
目的 列表 ,并 将 其 ID 设置 为 "nav”, 如 图 7-17 所 示 。 

(4) 添加 内 容 区 域 

本 例 中 的 内 容 为 4 块 相 同 布局 和 样式 的 图 文 混合 的 区 域 ,因此 ,在 此 使 用 了 4 个 典 套 
Div ,并 将 其 class 设置 同 为 “content”, 如 图 7-18 所 示 。 

(5) 添加 页 脚 区 域 

本 例 的 页 脚 区 域 仅 包含 版 权 信 息 与 日 期 ,添加 一 个 ID 为 “footer” 的 Div, 如 图 7-19 
所 示 。 

(6) 预览 网 页 初始 效果 

此 时 的 网 页 仅 包含 初始 的 内 容 , 在 没有 CSS 布局 和 美化 之 前 ,页 面 显示 效果 比较 " 难 
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图 7-17 设置 导航 条 列表 














7-19 页 尾 footer 


看 ,没有 排版 可 言 ,预览 效果 如 图 7-20 所 示 。 

2. 添加 CSS 样式 

(1) 实现 整体 居中 

为 最 外 层 ID 为 “main” 的 Div 设置 宽度 为 960px, 左 右 margin( 边 界 ) 都 为 auto, 即 可 
实现 Div 的 固定 宽度 且 居 中 ,如 图 7-21 所 示 。 
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图 7-20 网 页 初始 浏览 效果 图 7-21 设 定 固定 宽度 及 居中 


(2) 设置 导航 条 样式 
首先 ,将 列表 的 每 个 项 目 实现 左 浮动 ,这 样 可 以 使 纵向 排列 的 列表 项 目 横 过 来 ,如 


图 7-22 所 示 。 


然后 ,为 导航 超 链接 添加 其 他 CSS 优化 属性 ,分 别 设置 为 display (显示 )、width( 宽 




















图 7-22 左 浮动 列表 项 
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度 ) ,height( 高 度 ) 及 padding( 上 填充 ) ,如 图 7-23 所 示 ; 设 置 color( 颜 色 ) ,fontfamily( 字 
体 ) ,font-weight( 粗 细 ) font-size( 大 小 ) ,textralign( 对 齐 方式 ) textrdecoration( 文 本 修 
饰 ) 及 liststyle-type( 列 表 项 的 标志 类 型 ), 如 图 7-24 所 示 ; 设 置 background-color( 背 景 
色 ) ,如 图 7-25 所 示 。 





: 凡 肌 天 好 
3 NO 
paddng [了 mt 
3 nomal 
: baselne 














图 7-23 设置 导航 条 的 布局 属性 图 7-24 设置 导航 条 的 文本 属性 











badge [Bi] omooc 














图 7-25 设置 导航 条 的 背景 属性 


得 到 的 预览 效果 如 图 7-26 所 示 。 

(3) 设置 内 容 区 块 样式 

内 容 区 域 为 4 个 相同 显示 的 Div,class 类 名 为 *content”。 分 别 设置 width( 宽 度 )、 
margin( 上 下 边界 ) 及 float( 浮 动 ), 如 图 7-27 所 示 ; 设 置 font-family( 字 体 ) ,font-size( 大 
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小 ) 及 textralign( 对 齐 方式 ) ,如 图 7-28 所 示 。 
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图 7-26 导航 条 预览 效果 
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图 7-27 设置 content 类 的 布局 属性 图 7-28 设置 content 类 的 文本 属性 
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(4) 设置 页 尾 区 域 样式 


页 尾 区 域 为 网 页 的 版 权 信息 与 日 期 .设置 font-family( 字 体 ) ,font-size( 大 小 ) 及 text- 





align( 对 齐 方式 ) ,如 图 7-29 所 示 。 














展 性 
外 回 口 四 日 


国文 


color 


font-family 

font-stye 

font-variant 

: 14px 
Ineheiglt : Moma 
tet-sign :三 国 三 三 
tot-decortion : ITTF 





图 7-29 设置 footer 的 文本 属性 


在 进行 CSS 布局 美化 的 过 程 中 ,随时 可 以 通过 Fl2 键 进行 页 面 的 预览 ,在 
Dreamweaver CC 的 编辑 状态 与 预览 效果 可 能 存在 显示 差异 时 ,应 以 预览 效果 为 准 。 本 
例 完 成 后 的 页 面 预览 效果 如 图 7-30 所 示 , 可 以 看 出 与 前 面 表 格 布局 的 效果 几乎 一 致 ,但 


使 用 CSS 二 Div 的 方式 布局 排版 ,灵活 性 和 扩展 性 更 高 。 
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图 7-30 页 面 预览 效果 
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本 章 实 训 


【 实 训 】 
自 拟 一 个 主题 ,使 用 CSS 十 Div 布局 完成 一 张 网 页 ,效果 参考 图 7-31 。 
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图 7-31 布局 草图 
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早期 的 网 页 一 直 都 是 静态 的 ,缺乏 变化 和 生动 ,就 像 一 本 杂志 的 复印 件 一 样 ,再 怎么 
好 看 也 像 是 一 幅 被 定 了 格 的 风景 一 一 毫 无 生气 。 因 为 网 络 的 带宽 问题 ,使 得 连接 传输 速 
率 很 慢 ,要 制作 具有 动画 效果 的 Web 网 站 很 困难 。 随 着 网 络 技术 的 发 展 , 多 媒体 技术 在 
带宽 问题 被 解决 后 ,有 了 它 不 可 替代 的 一 席 之 地 。 

由 此 产生 了 Flash 动画 ,Flash 的 前 身 叫 作 Future Splash, 当时 Future Splash 最 大 的 
两 个 用 户 是 Microsoft 和 Disney。1996 年 11 月 Future Splash 正式 卖 给 Macromedia. 
com, 改 名 为 Flash 1.0 (网 上 也 有 信息 称 是 Flash 2. 0)。 

Flash 又 被 称 为 内 容 , 是 由 macromedia 公司 推出 的 交互 式 矢量 图 和 Web 动画 的 标 
准 , 由 Adobe 公司 收购 。 网 页 设计 者 使 用 Flash 创作 出 既 漂亮 又 可 改变 尺寸 的 导航 界面 
以 及 其 他 奇特 的 效果 。Flash 通常 也 指 Macromedia Flash Player( 现 Adobe Flash 
Player) 。 制 作 Flash 的 过 程 不 太 难 ,但 是 要 有 好 的 创意 和 美术 功底 才能 做 出 好 一 些 的 
Flash 动画 。 


8.1 Flash 简 介 





8.1.1 Flash 的 基本 功能 


Flash 是 一 种 动画 创作 与 应 用 程序 开发 于 一 身 的 创作 软件 , 目前 最 新 的 零售 版 本 为 
Adobe Flash Professional CC(2014 年 发 布 )。Flash CC 是 采用 的 64 位 架构 , 它 能 使 
Flash 更 加 模块 化 ,为 创建 数字 动画 、 交 互 式 Web 站 点 .桌面 应 用 程序 以 及 手机 应 用 程序 
开发 提供 了 功能 全 面 的 创作 和 编辑 环境 。Flash 广泛 用 于 创建 吸引 人 的 应 用 程序 ,它们 
包含 丰富 的 视频 ,声音 、 图 形 和 动画 。 可 以 在 Flash 中 创建 原始 内 容 或 者 从 其 他 Adobe 应 
用 程序 (如 Photoshop 或 Ilustrator) 导 入 它们 ,快速 设计 简单 的 动画 ,以 及 使 用 Adobe 
ActionScript 3.0 开发 高 级 的 交互 式 项 目 。 

Flash 动画 主要 是 由 矢量 图 形 组 成 的 ,而 且 其 播放 采取 了 * 流 模式 ”, 使 其 网 页 内 的 
Flash 动画 能 够 边 下 载 边 播放 ,因此 访问 者 可 以 很 快 就 看 到 动画 效果 。Flash 既 可 以 生成 
动画 创建 互动 性 网 页 ,在 网 页 中 加 入 声音 , 它 还 可 以 生成 炫目 的 图 形 界面 ,同时 它 能 生成 
独立 于 浏览 器 以 外 进行 播放 的 EXE 文件 。 

在 现 阶段 ,Flash 应 用 的 领域 主要 有 娱乐 短片 .片头 .广告 .MTV、 导 航 条 、 小 游戏 . 产 
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品 展示 、 应 用 程序 开发 的 界面 开发 网 络 应 用 程序 等 几 个 方面 。Flash 已 经 大 大 增加 了 网 
络 功能 ,可 以 直接 通过 XML 读 取 数 据 ,又 加 强 了 与 ColdFusion、ASP、JSP 和 Generator 
的 整合 ,所 以 用 Flash 开发 网 络 应 用 程序 肯定 会 越 来 越 广泛 地 被 应 用 。 


8.1.2 Flash 的 工作 界面 

















Flash 既是 绘图 工具 又 是 电影 编辑 工具 。Flash Professional CC 工作 区 由 以 下 部 分 
组 成 : 一 个 舞台 (可 在 上 面 放置 媒体 内 容 )、 一 个 包含 菜单 和 命令 的 主 工 具 栏 (用 于 控制 应 
用 程序 功能 ) .多 个 浮动 面板 以 及 一 个 包含 工具 的 工具 栏 ( 用 于 创建 和 修改 矢量 图 形 内 
容 ) ,如 图 8-1 所 示 。 











图 8-1 Flash 的 工作 主 界面 


1. 舞台 

空心 的 方形 填充 屏幕 的 空白 部 分 ,在 这 里 叫 作 舞台 。 在 这 个 舞台 上 可 以 绘制 图 形 和 
预览 制作 的 电影 。 舞 台 是 在 其 中 放置 图 形 内 容 的 矩形 区 域 , 这 些 图 形 内容 包 括 矢量 插 图 、 
文本 框 、 按 钮 .导入 的 位 图 图 形 或 视频 剪辑 ,诸如 此 类 。Flash 创作 环境 中 的 舞台 相当 于 
Flash Player 中 在 回放 期 间 显示 Flash 文档 的 矩形 空间 ,可 以 在 工作 时 放大 和 缩小 以 更 
改 舞 台 的 视图 。 

2, 时 间 轴 

时 间 轴 用 于 组 织 和 控制 文档 内 容 在 一 定时 间 内 播放 的 层 数 和 帧 数 。 与 胶片 一 样 ， 
Flash 文档 也 将 时 长 分 为 帧 。 层 就 像 堆 释 在 一 起 的 多 张 幻灯 胶片 一 样 ,每 个 层 都 包含 一 
个 显示 在 舞台 中 的 不 同 图 像 。 时 间 轴 的 主要 组 件 是 层 . 帧 和 播放 头 。 

文档 中 的 层 列 在 时 间 轴 左 侧 的 列 中 。 每 个 层 中 包含 的 帧 显示 在 该 层 名 右 侧 的 一 行 
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中 。 时 间 轴 顶部 的 时 间 轴 标题 指示 帧 编号 。 播 放 头 指示 在 舞台 中 当前 显示 的 帧 。 
时 间 轴 状态 显示 在 时 间 轴 的 底部 , 它 指示 所 选 的 帧 编号 、 当 前 帧 频 以 及 到 当前 帧 为 止 
的 运行 时 间 , 如 图 8-2 所 示 。 








图 8-2 时 间 轴 面板 


注意 : 在 播放 动画 时 ,将 显示 实际 的 帧 频 ; 如 果 计 算 机 不 能 足够 快 地 显示 动画 , 则 该 
帧 频 可 能 与 文档 的 帧 频 不 一 致 。 

可 以 更 改 帧 在 时 间 轴 中 的 显示 方式 ,也 可 以 在 时 间 轴 中 显示 帧 内 容 的 缩 略 图 。 时 间 
轴 显示 文档 中 哪些 地 方 有 动画 ,包括 逐 帧 动画 、 补 间 动 画 和 运动 路 径 。 

3, 主 工具 栏 

Flash 配 有 标准 的 主 工具 栏 。 工 具 栏 中 的 各 项 功能 用 工具 条 中 的 功能 都 可 以 实现 。 
如 果 还 不 熟悉 快捷 键 , 可 能 会 用 得 着 菜单 功能 。 工 作 区 项 部 的 主 工具 栏 显 示 包 含 命令 (用 
于 控制 Flash 功能 ) 的 菜单 。 这 些 菜单 包括 “文件”"“ 编 辑 ”"“ 视 图 ”“ 插 入 ”、“ 修 改 ”“ 文 
本 ”“ 命 令 ”“ 控 制 "“ 调 试 "“ 窗 口 "? 和 “帮助 ”。 

4. 侧 工具 栏 

在 早期 的 Flash 版 本 中 ,工具 栏 位 于 软件 左 侧 , 在 Flash CC 中 ,工具 栏 移动 到 软件 的 
最 右 侧 。 侧 工具 栏 看 起 来 有 点 像 其 他 图 形 程序 中 的 工具 条 , 它 的 功能 就 是 生成 和 编辑 图 
像 。 这 些 绘图 工具 非常 好 用 ,是 修改 各 种 图 形 必 不 可 少 的 工具 。 

利用 工具 栏 中 的 工具 可 以 绘制 、. 涂 色 .选择 和 修改 插图 ,并 可 以 更 改 舞 台 的 视图 。 工 
具 栏 分 为 以 下 4 个 部 分 : 

“工具 ”区 域 包含 绘画 、 涂 色 和 选择 工具 。 

“视图 ”区 域 包含 在 应 用 程序 窗口 内 进行 缩放 和 移动 的 工具 。 

“颜色 ”区 域 包含 用 于 笔触 颜色 和 填充 颜色 的 功能 键 。 

“选项 ”区 域 显示 选 定 工 具 的 组 合 键 ,这 些 组 合 键 会 影响 工具 的 涂 色 或 编辑 操作 。 

Flash 绘图 是 整个 绘图 过 程 中 最 烦琐 、 最 耗 时 、 最 容易 失去 信心 的 地 方 , 但 又 不 能 跳 
过 也 没有 取 巧 的 地 方 。 此 时 需要 的 只 是 耐心 ,因为 鼠标 毕竟 不 是 画笔 ,更 不 可 能 一 步 到 
位 ,其 实 大 家 平时 所 说 的 “ 鼠 绘 ?就 是 用 鼠标 调整 线段 的 过 程 。 刚 开始 时 会 有 些 不 顺 的 地 
方 ,多 多 练习 一 段 时 间 以 后 就 会 得 心 应 手 的 。 所 以 之 前 在 纸张 上 准备 工作 很 重要 。 纸 张 
上 修改 起 来 相对 轻松 很 多 ,如 果 在 电脑 中 进行 此 项 的 前 期 工作 会 更 加 费时 费力 地 增加 工 
作 强 度 ,反而 工作 效率 不 高 。 
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5.“ 属 性 ”检查 器 

使 用 “属性 ”检查 器 可 以 很 容易 地 访问 舞台 或 时 间 轴 上 当前 选 定 项 的 最 常用 属性 ,从 
而 简化 了 文档 的 创建 过 程 。 可 以 在 “属性 ”检查 器 中 更 
改 对 象 或 文档 的 属性 ,而 不 用 访问 包含 这 些 功 能 的 菜 
单 或 面板 ,如 图 8-3 所 示 。 

取决 于 当前 选 定 的 内 容 , “属性 ”检查 器 可 以 显示 
当前 文档 ,文本 元件、 形状 、 位 图 、 视 频 、 组 、 帧 或 工具 
的 信息 和 设置 。 当 选 定 了 两 个 或 多 个 不 同类 型 的 对 象 
时 ,“ 属 性 ”检查 器 会 显示 选 定 对 象 的 总 数 。 
6. 面板 组 


Flash 主 界面 的 右 侧 是 面板 组 , 面板 组 有 助 于 查 
看 ,组 织 和 更 改 文档 中 的 元 素 。 面 板 中 的 可 用 选项 控 
制 着 元 件 、 实 例 ,颜色 ,类 型 , 帧 和 其 他 元 素 的 特征 。 
面板 组 可 以 处 理 对 象 .颜色 、 文 本 、 实 例 \ 帧 ,场景 
和 整个 文档 。 例 如 ,可 以 使 用 混 色 器 创建 颜色 ,并 使 用 “对 齐 ” 面 板 来 将 对 象 彼此 对 齐 或 与 
舞台 对 齐 。 要 查看 Flash 中 可 用 面板 的 完整 列表 ,可 查看 “窗口 "菜单 。 

大 多 数 面板 都 包括 一 个 带 有 附加 选项 的 弹出 菜单 。 该 选项 菜单 由 面板 标题 栏 中 的 一 
个 控件 指示 (如 果 没 有 出 现 选项 菜单 控件 ,该 面板 就 没有 选项 菜单 )。 


8. 1.3 Flash 的 工作 流程 


Flash 的 工作 流程 应 该 从 创建 新 的 Flash 文档 开始 ,最 后 以 发 布 应 用 程序 使 其 在 
Web 上 播放 而 结束 。 

(1) 创建 新 文档 是 创建 自己 的 新 应 用 程序 的 起 点 。 

(2) 添加 媒体 内 容 , 在 应 用 程序 中 快速 添加 矢量 插图 ,文本 、 位 图 图 像 ,视频 ,声音 
钮 以 及 影片 剪辑 。 

(3) 添加 导航 控件 ,利用 Flash 提供 的 内 置 组 件 和 行为 ,可 以 将 导航 按钮 和 其 他 的 用 
户 界 面 元 素 拖 到 应 用 程序 中 。 

(4) 添加 动画 和 基本 的 交互 性 ,向 应 用 程序 添加 内 置 特 效 和 行为 。 

(5) 测试 应 用 程序 ,在 Flash Player 中 预览 应 用 程序 ,以 确认 它 在 发 布 之 前 可 以 正确 
工作 。 

(6) 发 布 和 查看 应 用 程序 ,使 应 用 程序 准备 好 在 Web 上 或 其 他 要 发 布 的 位 置 进行 
部 署 。 


8.1.4 Flash 的 基本 操作 


在 Flash 中 工作 时 ,是 在 Flash 文档 ( 即 保存 时 文件 扩展 名 为 . fla 的 文件 ) 中 工作 。 
在 准备 部 署 Flash 内 容 时 发 布 它 ,同时 会 创建 一 个 扩展 名 为 . swf 的 文件 。 
默认 情况 下 ,运行 创建 的 应 用 程序 的 Flash Player 随 Flash 一 起 安装 。Flash Player 














图 8-3 “属性 "检查 器 
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确保 可 以 在 最 大 范围 内 ,在 各 种 平台 、 浏 览 器 和 设备 上 以 一 致 的 方式 查看 和 使 用 所 有 


SWF 内 容 














1, 创建 新 文档 
(1) 执行 “文件 ”>“ 新 建 " 命 令 。 
(2) 选择 ActionScript 3.0, 阅 读 出 现 的 文件 类 型 描述 ,然后 单 击 "确定 ”按钮 ,如 图 8-4 


所 示 。 








人 区 本 |] 











(3) 执行 "文件 ”一 “保存 命令。 将 文件 命名 为 myad. fla, 然 后 将 文件 保存 在 桌面 


图 8-4 创建 新 文档 





或 任何 方便 的 位 置 中 。 文 件 的 扩展 名 为 fla”。 
2. 定义 文档 属性 


配置 文档 属性 通常 是 制作 中 的 第 一 步 。 可 以 使 用 
“属性 ”检查 器 来 指定 影响 整个 应 用 程序 的 设置 ,例如 


在 


每 秒 帧 数 


性 "命令 。 


明 。 说 明 
本 对 象 ,“ 
性 的 设置 
查 器 显示 





(1) 帧 频 
“ 帧 频 ”, 请 输入 每 秒 显 示 的 动画 帧 的 数量 。 图 8-5 “属性 "检查 器 显示 文档 设置 


对 于 


如 果 


使 用 * 


。 因 为 只 打开 了 一 个 新 文档 ,所 以 “属性 ” 检 


(fps) 播放 速度 ,以 及 舞台 大 小 和 背景 色 。 
“属性 ”检查 器 没有 打开 ,可 执行 “窗口 >“ 属 


“属性 ”检查 器 可 以 查看 和 更 改 所 选 对 象 的 说 
取决 于 所 选 对 象 的 类 型 。 例 如 ,如 果 选 择 文 
属性 ”检查 器 将 显示 用 于 查看 和 修改 文本 属 





文档 设置 ,如 图 8-5 所 示 。 
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对 于 大 多 数 计算 机 显示 的 动画 ,特别 是 Web 站 点 中 播放 的 动画 , 8fps( 每 秒 帧 数 ) 到 
12fps 就 足够 了 。Flash 动画 的 播放 速度 为 每 秒 12 帧 ,这 是 在 Web 上 播放 动画 的 最 佳 








(2)》 中 二 
对 于 “尺寸 ”, 单 击 编辑 ActionSeript 设置 国 . 出 现 如 图 8-6 所 示 的 对 话 框 ,请 执行 以 
下 操作 之 一 : [二 硬汉 | 
。 要 指定 舞台 大 小 (以 像素 为 单位 ) ,请 在 * 舞 
台大 小 ”中 输入 值 。 


默认 文档 大 小 为 550X 400 像素 。 最 小 大 
小 为 1X1 像素 ;最 大 为 8192X 8192 像素 。 
。 要 将 舞台 大 小 设置 为 内 容 四 周 的 空间 都 相 
等 ,可 单 击 * 锚 记 ” 中 的 按钮 。 要 最 小 化 文 
档 大 小 ,请 将 所 有 元 素 对 齐 到 舞台 的 左上 
角 ,然后 单 击 * 锚 记 ” 中 按钮 的 方向 按钮 。 
“舞台 颜色 " 框 指示 舞台 的 颜色 。 单 击 “ 舞 
台 颜 色 ” 框 上 的 向 下 箭头 ,然后 在 颜色 样本 
上 移动 泣 管 "工具 ,以 便 在 * 十 六 进 制 " 文 图 8-6 文档 属性 “尺寸 
本 框 中 查看 它们 的 十 六 进 制 值 。 

3. 使 用 帧 和 关键 帧 

关键 帧 是 指 在 动画 中 定义 的 更 改 所 在 的 帧 ,或 包含 修改 文档 的 帧 动作 的 帧 。Flash 
可 以 在 关键 帧 之 间 补 间或 填充 帧 ,从 而 生成 流畅 的 动画 。 因 为 关键 帧 可 以 不 用 画 出 每 个 
帧 就 可 以 生成 动画 ,所 以 能 更 容易 地 创建 动画 。 可 以 通过 在 时 间 轴 中 拖 动 关键 帧 来 更 改 
补 间 动 画 的 长 度 。 

帧 和 关键 帧 在 时 间 轴 中 出 现 的 顺序 决定 它们 在 Flash 应 用 程序 中 显示 的 顺序 。 可 以 
在 时 间 轴 中 排列 关键 帧 ,以 便 编辑 动画 中 事件 的 顺序 。 

在 时 间 轴 上 可 以 看 到 几 种 不 同类 型 的 帧 : 黑色 的 实心 小 圆圈 代表 关键 帧 ,就 是 指 一 
个 有 内 容 的 、 或 者 说 是 有 内 容 改变 的 帧 , 它 的 作用 是 定义 动画 中 的 对 象 变化 ;白色 的 空心 
小 圆圈 代表 空白 关键 帧 ,就 是 一 个 没有 内 容 的 关键 帧 ; 带 有 空心 矩形 的 帧 表示 该 帧 是 一 系 
列 相 同 帧 中 的 最 后 一 帧 。 在 时 间 轴 上 还 有 一 个 红色 播放 头 ,用 来 显示 当前 帧 的 位 置 ,同时 
在 标尺 上 还 会 显示 帧 的 编号 。 
在 时 间 轴 中 ,可 以 处 理 帧 和 关键 帧 ,将 它们 按照 想 让 对 象 在 帧 中 出 现 的 顺序 进行 排 
以 通过 在 时 间 轴 中 拖 动 关 键 帧 来 更 改 补 间 动 画 的 长 度 。 

(1) 插入 新 帧 

执行 “插入 ”一 “时 间 轴 ”>“ 帧 ”命令 。 

(2) 创建 新 关键 帧 

执行 “插入” 一“ 时 间 轴 ”一 “关键 帧 ”命令 ,或 者 右 击 要 在 其 中 放置 关键 帧 的 帧 ,然后 从 
上 下 文 菜单 中 选择 “插入 关键 帧 ”。 
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(3) 创建 新 的 空白 关键 帧 
执行 “插入 ”- 盖 时 间 轴 ”~ 空白 关键 帧 ”命令 ,或 者 右 击 要 在 其 中 放置 关键 帧 的 帧 , 然 
后 从 上 下 文 菜单 中 选择 "插入 空白 关键 帧 ”。 
(4) 延长 关键 帧 的 持续 时 间 
请 按 住 Alt 键 将 该 关键 帧 拖 到 新 序列 持续 时 间 的 最 后 一 帧 。 
(5) 将 关键 帧 转换 为 帧 
右 击 该 关键 帧 ,然后 从 上 下 文 菜单 中 选择 “清除 关键 帧 "。 被 清除 的 关键 帧 以 及 到 下 
一 个 关键 帧 之 前 的 所 有 帧 都 将 被 该 关键 帧 之 前 的 帧 内 容 所 替换 。 
(6) 更 改 补 间 序列 的 长 度 
将 开始 关键 帧 或 结束 关键 帧 向 左 或 向 右 拖 动 。 要 更 改 逐 帧 序列 的 长 度 。 
4. 使 用 层 
层 就 像 透 明 的 醋酸 纤维 薄片 一 样 ,一 层 层 地 向 上 县 加 。 层 可 以 组 织 文档 中 的 插图 。 
可 以 在 层 上 绘制 和 编辑 对 象 ,而 不 会 影响 其 他 层 上 的 对 象 。 如 果 一 个 层 上 没有 内 容 ,那么 
就 可 以 透 过 它 看 到 下 面 的 层 。 
要 绘制 上 色 或 者 对 层 做 其 他 修改 ,需要 选择 该 层 以 激活 它 。 层 名 称 旁边 的 铅笔 图 标 
表示 该 层 或 文件 夹 处 于 活动 状态 。 一 次 只 能 有 一 个 层 处 于 活动 状态 (尽管 一 次 可 以 选择 
多 个 层 ) 。 
当 创 建 了 一 个 新 的 Flash 文档 之 后 , 它 就 包含 一 个 层 。 可 以 添加 更 多 的 层 ,以 便 在 文 
档 中 组 织 插图 、 动 画 和 其 他 元 素 。 可 以 创建 的 层 数 只 受 计算 机 内 存 的 限制 ,而 且 层 不 会 增 
加 发 布 的 SWF 文件 的 大 小 。 可 以 隐藏 .锁定 或 重新 排列 层 。 
对 声音 文件 动作 、 帧 标签 和 帧 注释 分 别 使 用 不 同 的 层 或 文件 夹 是 个 很 好 的 主意 。 这 
有 助 于 在 需要 编辑 这 些 项 目 时 快速 地 找到 它们 。 另 外 ,使 用 特殊 的 引导 层 可 以 使 绘画 和 
编辑 变 得 更 加 容易 ,而 使 用 遗 单 层 可 以 创建 复杂 的 效果 。 
层 有 4 种 状态 : 
。 活动 状态 : 可 以 对 该 层 进行 各 种 操作 。 
。 隐藏 状态 : 即 在 编辑 时 是 看 不 见 的 ,同时 ,处 于 隐藏 状态 的 图 层 不 能 进行 任何 修 
改 。 这 就 产生 了 一 个 小 技巧 , 当 要 对 某 个 图 层 进行 修改 又 不 想 被 其 他 层 的 内 容 干 
扰 时 ,可 以 先 将 其 他 图 层 隐藏 起 来 。 

。 锁定 状态 : 被 锁定 的 图 层 无 法 进行 任何 操作 。 在 Flash 制作 中 ,大 家 应 该 养 成 个 
好 习惯, 凡是 完成 一 个 层 的 制作 就 立刻 把 它 锁定 ,以 免 误 操作 带 来 麻烦 。 

。 外 框 模式 : 处 于 外 框 模式 的 层 ,其 上 的 所 有 图 形 只 能 显示 轮廓 。 请 注意 ,其 他 图 
层 都 是 实心 的 方块 , 独 有 此 层 是 外 框 形式 。 

(1) 创建 层 

在 创建 了 一 个 新 层 之 后 , 它 将 出 现在 所 选 层 的 上 面 。 新 添加 的 层 将 成 为 活动 层 。 

方法 : 单 击 时 间 轴 底部 的 插入 图 层 按钮 上 . 

(2) 删除 层 或 文件 夹 

选择 该 层 或 文件 夹 。 将 层 或 文件 夹 拖 到 删除 图 层 按钮 回国 . 
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注意 : 删除 层 文件 夹 之 后 ,所 有 包含 的 层 及 其 内 容 都 会 删除 。 

5. 使 用 元 件 

(1) 什么 是 “元 件 ” 与 “实例 ” 

“元 件 ?是 在 Macromedia Flash MX 2004 中 创建 的 图 形 .按钮 或 影片 剪辑 。 元 件 只 需 
创建 一 次 ,然后 即 可 在 整个 文档 或 其 他 文档 中 重复 使 用 。 元 件 可 以 包含 从 其 他 应 用 程序 
中 导入 的 插图 。 创 建 的 任何 元 件 都 会 自动 成 为 当前 文档 的 库 的 一 部 分 。 

每 个 元 件 都 有 自己 的 时 间 轴 。 可 以 将 帧 ,关键 帧 和 层 添 加 至 元 件 时 间 轴 。 如 果 元 件 
是 影片 剪辑 或 按钮 , 则 可 以 使 用 动作 脚本 控制 元 件 。 

“实例 ?是 指 位 于 舞台 上 或 嵌 套 在 另 一 个 元 件 内 的 元 件 副本 。 实 例 可 以 与 它 的 元 件 在 
颜色 ,大 小 和 功能 上 差别 很 大 。 编 辑 元 件 会 更 新 它 的 所 有 实例 ,但 对 元 件 的 一 个 实例 应 用 
效果 则 只 更 新 该 实例 。 

在 文档 中 使 用 元 件 可 以 显著 减 小 文件 的 大 小 ;保存 一 个 元 件 的 几 个 实例 比 保存 该 元 
件 内 容 的 多 个 副本 占用 的 存储 空间 小 。 例 如 ,通过 将 诸如 背景 图 像 这 样 的 静态 图 形 转换 
为 元 件 然后 重新 使 用 它们 ,可 以 减 小 文档 的 文件 大 小 。 使 用 元 件 还 可 以 加 快 SWF 文件 
的 回放 速度 ,因为 一 个 元 件 只 需 下 载 到 Flash Player 中 一 次 。 

创建 元 件 的 方法 : 确保 未 在 舞台 上 选 定 任 何 内 容 , 选 择 “ 修 改 ”>“ 新 建 元 件 ”。 在 “ 创 
建新 元 件 ” 对 话 框 中 ,输入 元 件 名 称 并 选择 行为 (“图 像 “ 按 钮 "或 “影片 剪辑 ”) 。 

(2) 元 件 的 类 型 

每 个 元 件 都 有 一 个 唯一 的 时 间 轴 和 舞台 ,以 及 几 个 层 。 创 建 元 件 时 要 选择 元 件 类 型 ， 
这 取决 于 在 文档 中 如 何 使 用 该 元 件 。 

。 加 图 形 元 件 可 用 于 静 态 图 像 ,并 可 用 来 创建 连接 到 主 时 间 轴 的 可 重用 动画 片段 。 
图 形 元 件 与 主 时 间 轴 同步 运行 。 交 互 式 控件 和 声音 在 图 形 元 件 的 动画 序列 中 不 
起 作用 。 

圆 使 用 按钮 元 件 可 以 创建 响应 鼠标 单 击 . 滑 过 或 其 他 动作 的 交互 式 按钮 。 可 以 定 
义 与 各 种 按钮 状态 关联 的 图 形 ,然后 将 动作 指定 给 按钮 实例 。 

图 使 用 影片 剪辑 元 件 可 以 创建 可 重用 的 动画 片段 。 影 片 剪辑 拥有 它们 自己 的 独 
立 于 主 时 间 轴 的 多 帧 时 间 轴 。 可 以 将 影片 剪辑 看 作 是 主 时 间 轴 内 的 柑 套 时 间 轴 ， 
它们 可 以 包含 交互 式 控件 ,声音 甚至 其 他 影片 剪辑 实例 。 也 可 以 将 影片 剪辑 实例 
放 在 按钮 元 件 的 时 间 轴 内 ,以 创建 动画 按钮 。 

6. 发 布 和 查看 应 用 程序 

完成 文档 编辑 后 ,可 使 用 “发 布 ”命令 创建 一 个 Web 兼容 的 应 用 程序 (创建 为 SWF 
文件 )。 

如 果 使 用 默认 设置 的 “发 布 ”命令 ,Flash 会 为 在 Web 上 使 用 而 准备 文件 。Flash 将 
发 布 该 SWF 文件 ,并 创建 带 有 显示 SWF 文件 所 需 标记 的 HTML 文件 。 

定义 了 必需 的 发 布设 置 之 后 ,只 需 选择 "文件 ”一 发布" 命 令 即 可 将 文件 重复 导出 为 
所 有 选 定 的 格式 。 由 于 Flash 会 存储 文档 所 用 的 发 布设 置 .因此 每 个 应 用 程序 都 可 以 有 
自己 的 设置 。 
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8.2 创建 深 帧 动画 





8.2.1 逐 帧 动画 的 概念 


逐 帧 动画 就 是 通过 更 改 每 一 帧 中 的 舞台 内 容 而 获得 动画 效果 , 它 最 适合 于 每 一 帧 中 
的 图 像 都 在 更 改 而 不 是 仅仅 简单 地 在 舞台 中 移动 的 复杂 动画 。 逐 帧 动画 的 缺点 是 太 耗费 
时 间 和 精力 ,而 且 最 终生 成 的 动画 文件 偏 大 。 但 是 , 它 也 有 自己 的 优点 , 即 能 最 大 限度 地 
控制 动画 的 变化 细节 。 逐 帧 动画 是 常用 的 动画 表现 形式 ,也 就 是 一 帧 一 帧 地 将 动作 的 每 
个 细节 都 画 出 来 。 显 然 ,这 是 一 件 很 吃力 的 工作 ,但 是 使 用 一 些小 的 技巧 能 够 减少 一 定 的 
工作 量 。 


8.2.2 逐 帧 动画 的 创建 过 程 


要 创建 逐 帧 动画 ,需要 将 每 个 帧 都 定义 为 关键 帧 ,然后 给 每 个 帧 创建 不 同 的 图 像 。 每 
个 新 关键 帧 最 初 包含 的 内 容 和 它 前 面 的 关键 帧 是 一 样 的 ,因此 可 以 递增 地 修改 动画 中 
的 帧 。 

1. 创建 逐 帧 动画 的 几 种 方法 

(1) 用 导入 的 静态 图 片 建立 逐 帧 动画 

将 JPG、PNG 等 格式 的 静态 图 片 连续 导入 Flash 中 ,就 会 建立 一 段 逐 帧 动画 。 

(2) 绘制 矢量 逐 帧 动画 

用 鼠标 或 压 感 笔 在 场景 中 一 帧 帧 地 画 出 帧 内 容 。 

(3) 文字 逐 帧 动画 

用 文字 作为 帧 中 的 元 件 , 实 现 文字 跳跃 .旋转 等 特效 。 

(4) 导入 序列 图 像 

可 以 导入 GIF 序列 图 像 .SWF 动画 文件 或 者 利用 第 三 方 软件 (如 Swish .Swift 3D 
等 ) 产 生 的 动画 序列 。 

创建 逐 帧 动画 的 基本 过 程 就 是 : 在 各 帧 中 绘制 逐渐 变化 的 图 像 ,如 果 必 要 ,添加 图 层 
以 使 多 个 对 象 不 互相 干扰 (不 同 图 层 上 也 可 以 是 另外 的 逐 帧 动画 ) 。 

2, 绘图 纸 功能 

绘图 纸 是 一 个 帮助 定位 和 编辑 动画 的 辅助 功能 ,这 个 功能 对 制作 逐 帧 动画 特别 有 用 。 
通常 情况 下 ,Flash 在 舞台 中 一 次 只 能 显示 动画 序列 的 单个 帧 。 使 用 绘图 纸 功能 后 ,就 可 
以 在 舞台 中 一 次 查看 两 个 或 多 个 帧 了 。 

另外 ,在 逐 帧 动画 中 ,动作 主体 的 简单 与 否 对 制作 的 工作 量 有 很 大 的 影响 , 擅 于 将 动 
作 的 主体 简化 ,可 以 成 倍 提高 工作 的 效率 。 

一 个 最 明显 的 例子 就 是 小 小 的 “火柴 人 ”功夫 系列 ,动画 的 主体 相当 简化 ,以 这 样 的 主 
体 来 制作 以 动作 为 主 的 影片 ,即使 用 完全 逐 帧 的 制作 ,工作 量 也 是 可 以 承受 的 。 试 想 用 一 
个 盘 真 的 人 的 形象 作为 动作 主体 来 制作 这 样 的 动画 ,工作 量 就 会 增加 很 多 。 
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注 : 对 于 不 是 以 动作 为 主要 表现 对 象 的 动画 ,画面 简单 也 是 省 力 良 方 。 

循环 法 是 最 常用 的 动画 表现 方法 ,将 一 些 动作 简化 成 由 只 有 几 帧 ,甚至 两 三 帧 的 逐 帧 
动画 组 成 的 影片 剪辑 ,利用 影片 剪辑 的 循环 播放 的 特性 ,来 表现 一 些 动画 ,例如 头发 .衣服 
飘动 ,走路 ,说 话 等 动画 经 常 使 用 该 法 。 

【实例 8-1】 利用 逐 帧 动画 实现 天 蓬 元 遇 球 动 的 斗篷 。 

(1) 创建 新 文档 , 单 击 * 图 层 1” 使 之 成 为 活动 层 ,选择 第 一 个 帧 。 

(2) 如 果 该 帧 不 是 关键 帧 ,请 选择 “插入 ”一 “时 间 轴 ”一 “关键 帧 "使 之 成 为 一 个 关 
键 帧 。 

(3) 在 序列 的 第 一 个 帧 上 创建 插图 。 可 以 使 用 绘画 工具 ,从 剪贴 板 中 粘贴 图 形 ,或 导 
入 一 个 文件 ,在 这 里 ,导入 一 张 预先 制作 好 的 GIF 图 片 。 将 文件 直接 导入 到 当前 的 Flash 
文档 中 ,请 选择 “文件 ”>“ 导 入 到 舞台 ”, 如 图 8-7 所 示 。 








图 8-7 导入 图 片 到 舞台 


(4) 单 击 同一 行 中 右 侧 的 下 一 帧 ,然后 选择 “插入 ”一 “时 间 轴 ”一 “关键 帧 ,这 将 添加 
一 个 新 的 关键 帧 ,其 内 容 和 第 一 个 关键 帧 一 样 。 

(5) 在 舞台 中 改变 该 帧 的 内 容 , 把 原 内容 删 除 , 重 新 导入 第 二 张 图 片 。 

(6) 要 完成 逐 帧 动画 序列 ,重复 第 (4) 步 和 第 (5) 步 ,直到 创建 了 所 需 的 动作 。 

(7) 单 击 时 间 轴 上 的 “洋葱 皮 ” 国 强 .利用 绘图 纸 功能 ,调整 三 个 动作 在 位 置 上 的 一 臻 
性 ,如 图 8-8 所 示 。 

(8) 保存 文档 ,测试 动画 序列 ,请 选择 “控制 >>“ 播放 ”或 按 下 Ctrl 十 Enter 键 快速 发 
布 SWF 文件 。 

(9) 在 源 文件 FLA 保存 路 径 下 ,会 自动 生成 一 个 同名 的 SWF 文件 ,该 文件 可 直接 双 
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击 播放 或 插入 到 网 页 中 。 如 图 8-9 所 示 。 





第 2 帧 


图 8-9 逐 帧 动画 示例 


实例 8-1 中 天 莲 元 帅 斗 篷 的 飘动 的 动画 就 是 由 三 帧 组 成 的 影片 剪辑 ,只 需要 画 出 一 
帧 ,其 他 两 帧 可 以 在 第 一 帧 的 基础 上 稍 做 修改 便 完 成 了 。 这 种 循环 的 逐 帧 动画 ,要 注意 其 
“节奏 ”, 做 好 了 能 取得 很 好 的 效果 。 


8.3 创建 补 间 动 画 





8.3.1 补 间 动画 的 概念 

1. 补 间 动 画 的 概念 

补 间 动 画 , 这 一 名 称 源 自 这 种 动画 涉及 动作 的 特点 ,以 及 动作 的 创建 方式 。 术 语 补 间 
(tween) 是 补足 区 间 (in between) 的 简称 。 可 通过 以 下 方法 来 定义 补 间 动 画 : 定义 要 为 其 
制作 动画 的 对 象 的 起 始 位 置 和 结束 位 置 ,然后 让 Flash 计算 该 对 象 的 所 有 补足 区 间 位 置 。 
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使 用 这 种 方法 ,只 需 设置 要 为 其 制作 动画 的 对 象 的 起 始 位 置 和 结束 位 置 ,就 可 以 创建 平滑 
的 动作 动画 。 

补 间 动画 也 是 Flash 中 非常 重要 的 表现 手段 之 一 , 补 间 动 画 的 对 象 必须 是 “元 件 "或 
“成 组 对 象 ”。 

运用 补 间 动 画 , 可 以 设置 元 件 的 大 小 ,位 置 .颜色 、 透 明度 ,旋转 等 种 种 属性 ,配合 别 的 
手法 ,甚至 能 做 出 令 人 称奇 的 仿 3D 的 效果 来 。 

在 Flash 的 时 间 帧 面板 上 ,在 一 个 时 间 点 (关键 帧 ) 放 置 一 个 元 件 ,然后 在 另 一 个 时 间 
点 (关键 帧 ) 改 变 这 个 元 件 的 大 小 、 颜 色 、 位 置 . 透 明度 等 ,Flash 根据 二 者 之 间 的 帧 的 值 创 
建 的 动画 被 称 为 变形 动画 。 

构成 动作 补 间 动 画 的 元 素 是 元 件 ,包括 影片 剪辑 图 形 元 件 、 按 钮 等 ,除了 元 件 ,其 他 
元 素 包括 文本 都 不 能 创建 补 间 动画 的 ,其 他 的 位 图 、 文 本 等 都 必须 要 转换 成 元 件 才 行 ,只 
有 把 形状 “组 合 ” 或 者 转换 成 “元 件 " 后 才 可 以 做 “ 补 间 动 画 ”。 

2. 创建 动作 补 间 动 画 的 方法 

补 间 动画 的 原理 是 : 在 第 一 个 关键 帧 中 设置 元 件 实例 、 群 组 体 或 文字 的 属性 ,然后 在 
第 二 个 关键 帧 中 修改 对 象 的 属性 ,从 而 在 两 帧 之 间 产 生动 画 效果 ,可 以 修改 的 属性 包括 大 
小 .颜色 .旋转 和 倾斜 位置. 透明度 以 及 各 种 属性 的 组 合 。 

在 时 间 轴 面板 上 动画 开始 播放 的 地 方 创建 或 选择 一 个 关键 帧 并 设置 一 个 元 件 ,一 帧 
中 只 能 放 一 个 项 目 , 在 动画 要 结束 的 地 方 创建 或 选择 一 个 关键 帧 并 设置 该 元 件 的 属性 ,再 
单 击 开始 帧 , 单 击 右键 ,在 弹出 的 菜单 中 选择 “创建 补 间 动 画 ”, 就 建立 了 “动作 补 间 动 画 ”。 
动作 补 间 动 画 建立 后 ,时 间 帧 面板 的 背景 色 变 为 淡 紫 色 ,在 起 始 帧 和 结束 帧 之 间 会 变 成 蓝 
色 , 如 图 8-10 所 示 。 





图 8-10 补 间 动 画 


8.3.2 补 间 动画 示例 


1. 使 用 运动 引导 层 
运动 引导 层 可 以 绘制 路 径 , 元 件 可 以 沿 着 这 些 路 径 运 动 。 可 以 将 多 个 层 链接 到 一 个 
运动 引导 层 ,使 多 个 对 象 沿 同一 条 路 径 运动 。 链 接 到 运动 引导 层 的 常规 层 就 称 为 引导 层 。 
【实例 8-2】 使 用 运动 引导 层 ,实现 球 落 的 树叶 补 间 动 画 。 
(1) 创建 新 文档 , 单 击 * 图 层 1” 使 之 成 为 活动 层 ,选择 第 一 个 帧 。 
(2) 如 果 该 帧 不 是 关键 帧 ,请 选择 “插入 ”一 “时 间 轴 ”一 “ 关 
键 帧 "使 之 成 为 一 个 关键 帧 。 
(3) 在 序列 的 第 一 个 帧 上 绘图 ,在 左 侧 工具 条 中 选择 "铅笔 
图 工具 ,选项 使 用 “平滑 ”, 然 后 在 舞台 中 绘制 绿色 的 树叶 ,如 
图 8-11 所 示 。 





图 8-11 绘制 树叶 
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(4) 将 绘制 的 树叶 转换 为 元 件 ,区 域 选中 树叶 ,选择 “修改 ”一 “转换 为 元 件 ”, 弹 出 如 
图 8-12 所 示 的 “转换 为 元 件 ” 对 话 框 ,输入 元 件 名 称 并 选择 行为 为 "图形 ”。 








转 皖 为 元 件 








图 8-12 将 树叶 转换 为 元 件 


(5) 创建 树叶 的 补 间 动 画 , 设 定 第 1 帧 的 树叶 球 落 起 始 位 置 和 第 30 帧 的 终止 位 置 ， 
单 击 开始 帧 , 单 击 右键 ,在 弹出 的 菜单 中 选择 "创建 补 间 动 画 ”, 就 建立 了 "动作 补 间 动 画 ”， 
如 图 8-13 所 示 。 按 Enter 键 ,测试 动画 播放 ,这 时 发 现 树叶 是 直线 飘落 。 

(6) 选择 包含 树叶 的 图 层 , 右 击 , 然 后 从 上 下 文 菜单 中 选择 “添加 传统 引导 层 ”。 

Flash 会 在 所 选 的 图 层 之 上 创建 一 个 新 图 层 ,该 图 层 名 称 的 左 侧 有 一 个 运动 引导 层 
图 标 ,如 图 8-14 所 示 。 





图 8-13 设 定 树叶 补 间 动 画 图 8-14 添加 引导 层 


(7) 使 用 “钢笔 “铅笔 “直线 ”"“ 圆 形 ”“ 和 矩形 "或 “刷子 "工具 绘制 所 需 的 路 径 。 将 


中 心 与 线条 在 第 一 帧 中 的 起 点 和 最 后 一 帧 中 的 终点 对 齐 , 如 图 8-15 所 示 。 
= 
CD) | 


图 8-15 描绘 路 径 


要 隐藏 运动 引导 层 和 线条 ,以 便 在 工作 时 只 显示 对 象 的 移动 ,请 单 击 运动 引导 层 上 的 
眼睛 医 E 列 . 当 播放 动画 时 ,组 或 元 件 将 沿 着 运动 路 径 移 动 。 
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(8) 若 要 使 树叶 飘落 效果 更 允 真 ,可 在 开始 帧 和 结束 帧 之 间 另 外 再 创建 几 个 关键 帧 ， 
制作 树叶 飘落 的 中 间 状 态 ,适当 使 用 缩放 大 小 或 旋转 角度 。 

(9) 保存 文档 ,测试 动画 序列 ,请 选择 “控制 ”> 播放” 或 按 下 Ctrl 十 Enter 键 快速 发 
布 SWF 文件 。 在 源 文件 FLA 保存 路 径 下 ,会 自动 生成 一 个 同名 的 SWF 文件 ,该 文件 可 
直接 双击 播放 或 插入 到 网 页 中 。 

2. 人 遮 罩 特 效 

要 获得 聚光灯 效果 以 及 转变 ,可 以 使 用 遮 单 层 创建 一 个 孔 , 通 过 这 个 孔 可 以 看 到 下 面 
的 层 。 遗 站 项 目 可 以 是 填充 的 形状 ,文字 对 象 、 图 形 元 件 的 实例 或 影片 剪辑 。 可 以 将 多 个 
图 层 组 织 在 一 个 遗 单 层 之 下 来 创建 复杂 的 效果 。 

要 创建 动态 效果 ,可 以 让 遗 童 层 动 起 来 。 对 于 用 作 遗 置 的 填充 形状 ,可 以 使 用 补 间 形 
状 ;对 于 文字 对 象 .图 形 实 例 或 影片 剪辑 ,可 以 使 用 补 间 动 画 。 当 使 用 影片 剪辑 实例 作为 
遗 单 时 ,可 以 让 遗 四 沿 着 运动 路 径 运 动 。 

要 创建 让 日 层 ,可 以 将 遮 罩 项 目 放 在 要 用 作 遮 日 的 层 上 。 和 填充 或 笔触 不 同 , 谈 界 项 
目 像 是 个 窗口 , 透 过 它 可 以 看 到 位 于 它 下 面 的 链接 层 区 域 。 除 了 透 过 遗 音 项目 显示 的 内 
容 之 外 ,其 余 的 所 有 内 容 都 被 让 音 层 的 其 余部 分 隐藏 起 来 。 一 个 遗 单 层 只 能 包含 一 个 喧 
单项 目 。 按 钮 内 部 不 能 有 遗 音 层 ,也 不 能 将 一 个 中 站 应 用 于 另 一 个 遮 单 。 

【实例 8-3】 制作 探照灯 效果 的 标题 文字 。 

(1) 创建 新 文档 , 单 击 * 图 层 1” 使 之 成 为 活动 层 ,选择 第 一 个 帧 。 

(2) 如 果 该 帧 不 是 关键 帧 ,请 选择 “插入 ”一 “时 间 轴 ”一 “关键 帧 ”使 之 成 为 一 个 关 
键 帧 。 

(3) 制作 探照灯 效果 的 背景 层 ,使 用 了 深 色 背 景 , 深 色 文字 加 投影 效果 ,如 图 8-16 
所 示 。 

(4) 在 背景 层 之 上 创建 一 个 新 层 ,其 中 包含 谈 电 中 的 对 象 ,绘制 浅 色 背景 , 桔 色 文字 
加 投影 ,注意 使 用 "洋葱 皮 ”, 使 文字 与 背景 层 中 的 文字 重 和 至, 如 图 8-17 所 示 。 


图 8-16 背景 层 图 8-17 探照灯 下 的 文字 


(5) 再 创建 一 个 新 层 ,作为 谈 电 层 , 在 该 层 上 绘制 一 个 填充 形状 ,在 这 里 绘制 的 是 一 
个 圆 。 右 击 , 然 后 从 上 下 文 菜单 中 选择 “ 谈 电 层 ”。 

Flash 会 忽略 遗 单 层 中 的 位 图 、 渐 变色 透明、 颜色 和 线条 样式 。 在 遮 单 中 的 任何 填 
充 区 域 都 是 完全 透明 的 ;而 任何 非 填充 区 域 都 是 不 透明 的 。 

该 层 将 转换 为 谈 旱 层 ,这 将 用 一 个 遮 电 层 图 标 来 表示 。 紧 贴 它 下 面 的 层 将 链接 到 庶 
刻 层 ,其 内 容 会 透 过 遗 羊 上 的 填充 区 域 显示 出 来 。 被 遗 沁 的 层 将 以 缩 进 形式 显示 ,其 图 标 
将 更 改 为 一 个 被 中 四 的 层 的 图 标 , 如 图 8-18 所 示 。 
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Ligjhtilask 





图 8-18 制作 遮 单 层 


(6) 为 处 音 层 创建 补 间 动 画 ,使 圆 球 从 左 向 右 开 始 动画 ,如 图 8-19 所 示 。 





图 8-19 为 谈 罩 层 创建 补 间 动 画 


(7) 保存 文档 ,测试 动画 序列 ,选择 “控制 ”>“ 播 放 ” 或 按 下 Ctrl 十 Enter 键 快速 发 布 
SWF 文件 ,效果 如 图 8-20 所 示 。 在 源 文 件 FLA 保存 路 径 下 ,会 自动 生成 一 个 同名 的 
SWF 文件 ,该 文件 可 直接 双击 播放 或 插入 到 网 页 中 。 

注意 : 谴 单 原理 在 于 使 用 一 个 图 形 作 为 透 过 光线 的 区 域 , 当 这 个 图 形 所 在 层 转 为 遮 
单 层 时 ,图 形 区 域 下 一 层 的 物体 可 见 , 而 图 形 区 域外 的 物体 不 可 见 。 所 以 ,实例 8-3 中 若 
无 第 (3) 步 制作 背景 层 , 则 会 在 遮 音 图形 以 外 的 地 方 显示 空白 背景 ,如 图 8-21 所 示 。 


ig igh 


图 8-20 探照灯 效果 图 8-21 无 背景 层 效果 
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8.4 创建 形变 动画 





8.4.1 形变 动画 的 概念 


变动 画 又 称 为 形状 补 间 动 画 , 是 Flash 独 具 特 色 的 动画 表现 方法 , 尤其 在 文字 与 
图 形 之 间 的 变化 上 更 是 运用 广泛 。 形变 动画 就 是 指 在 两 个 或 两 个 以 上 的 关键 帧 之 间 对 对 
象 的 属性 进行 渐变 。 

可 以 渐变 的 属性 有 大 小 ,如 一 个 小 的 对 象 渐变 为 一 个 大 的 对 象 ;颜色 ,如 红色 的 对 象 
变 为 蓝 色 ;形状 本 身 , 如 圆 形 变 为 方形 ;文字 , 即 由 一 个 文字 变 为 另 一 个 文字 等 。 

生成 形变 动画 的 对 象 必须 是 “形状 "。 所 谓 “ 形 状 ”是 指 直接 用 绘图 工具 绘制 出 来 的 对 
象 ,或 将 文字 或 元 件 实例 执行 "修改 ?菜单 中 的 "分 离 "命令 (快捷 键 为 Ctrl 十 B) 打 散 后 分 
离 成 的 形状 。 如 图 8-22 所 示 是 一 个 形变 动画 的 效果 。 


和 贫民 


图 8-22 形变 动画 效果 图 








8.4.2 形变 动画 的 创建 过 程 


形变 动画 的 关键 就 是 制作 好 头 尾 两 个 关键 帧 的 动画 内 容 ,而 动画 的 效果 是 由 软件 自 
动产 生 的 。 

形变 动画 形变 的 对 象 必须 是 “ 散 ” 的 图 形 , 所 谓 “ 散 ”的 图 形 , 即 图 形 上 有 无 数 个 点 堆积 
而 成 的 ,而 并 非 是 一 个 整体 。 

利用 绘图 工具 直接 绘制 各 种 图 形 , 如 椭圆 .多边 形 等 “ 散 ” 的 图 ,或 者 利用 “分 离 ” 命 令 
打 散 各 种 文字 、 各 种 图 片 .图 像 ,就 完成 了 “ 散 ” 的 图 形 。 形 变动 画 就 是 在 两 点 之 间 发 生 形 
状 或 颜色 的 变化 ,而 这 两 点 ,在 Flash 里 就 是 "关键 帧 "。 一 般 步骤 就 是 在 “起 点 ” 帧 和 “ 终 
点 " 帧 之 间 添 加 补 间 动作 为 “图 形 ”(shape, 形 状 )。 


8.4.3 ”形变 的 方向 控制 


在 制作 形变 动画 时 ,可 以 通过 给 动画 添加 形状 提示 标识 点 来 控制 动画 的 效果 一 一 也 
就 是 说 ,可 以 控制 形状 以 什么 方向 或 方式 渐变 。 下 面 以 一 个 形变 动画 为 例 ,说 明 如 何 利用 
添加 形状 提示 标识 点 的 方式 控制 形变 动画 的 效果 。 

【实例 8-4] 圆 形 和 五 角 星 之 间 交 互 变形 。 

步骤 如 下 : 
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(1) 创建 新 文档 , 单 击 * 图 层 1” 使 之 成 为 活动 层 ,选择 第 一 个 帧 。 

(2) 选择 绘图 工具 条 中 的 椭圆 工具 图 , 单 击 填充 颜色 设置 按钮 ,把 填充 颜色 设 为 蓝 
色 , 按 住 Shift 键 ,用 鼠标 画 一 个 蓝 色 正 圆 形 。 用 箭头 工具 选中 圆 形 边线 , 按 Delete 键 将 
圆 边 删 除 ,如 图 8-23 所 示 。 

(3) 选中 时 间 轴 上 的 第 10 帧 , 按 F7 键 插入 空白 关键 帧 。 选 择 钢笔 工具 加 ,将 填充 颜 
色 设 为 绿色 ,此 时 鼠标 移动 到 舞台 上 时 , 变 为 钢笔 笔触 的 形状 , 单 击 左 键 会 在 舞台 上 留 下 
一 个 节点 , 按 这 种 方法 依次 单 击 并 移动 鼠标 ,最 后 在 舞台 上 勾画 出 一 个 闭合 五 角 星 ,结果 
如 图 8-24 所 示 。 








图 8-23” 画 出 的 正 圆 形 图 8-24 夯 出 的 五 角 星 


(4) 在 第 11 帧 中 按 F6 键 插入 关键 帧 ,这 时 第 10 帧 中 的 内 容 会 自动 出 现在 该 帧 里 ， 
在 第 20 帧 中 按 F7 键 插入 空白 关键 帧 , 回 到 第 1 帧 把 该 帧 中 的 内 容 按 Ctrl 十 C 键 复制 ,在 
第 20 帧 按 Ctrl 十 Shift 十 V 键 原 位 粘贴 。 

(5) 选择 到 第 1 帧 ,在 "属性 ?面板 的 " 补 间 ”下 拉 列 表 中 选择 “形状 ”选项 。 同 样 对 第 
11 帧 做 此 设置 。 做 好 后 的 时 间 轴 会 变 为 淡 绿 色 , 并 且 在 两 个 关键 帧 之 间 有 一 个 黑色 箭头 
出 现 , 如 图 8-25 所 示 。 此 时 可 直接 按 Enter 键 测 试 动画 效果 。 





图 8-25 设置 形变 动画 
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(6) 在 第 1 帧 中 ,选择 “修改 ”菜单 中 “形状 ”下 面 的 “添加 形状 提示 ”命令 , 则 在 图 形 上 会 
出 现 一 个 合 标 志 。 右 击 该 标志 ,在 弹出 菜单 中 选择 “添加 提示 ”命令 ,可 添加 数 个 标识 点 (也 
可 叫 作 “变形 线索 ”, 以 英文 字母 a~z 为 序 , 最 多 可 加 26 个 ), 这 里 ,为 了 使 变形 效果 好 些 , 添 
加 了 5 个 ,如 图 8-26(a) 所 示 。 这 时 ,在 第 10 帧 中 的 图 形 同 样 会 自动 出 现 5 个 标识 点 ,如 
图 8-26(b) 所 示 。 适 当 用 鼠标 拖 动 摆 放 后 ,标识 点 会 变 为 绿色 ,如 图 8-26(c) 所 示 。 第 1 帧 中 
的 标识 点 自动 变 为 黄色 ,如 图 8-26(d) 所 示 。 对 第 11 帧 和 第 20 帧 用 同样 的 方法 设置 。 





(a) 添加 5 个 标识 点 (b) 自动 出 现 的 标识 点 





(0) 摆 放 标识 点 的 位 置 (d) 第 1 帧 的 标识 点 


图 8-26 添加 标识 点 


(7) 保存 文档 ,测试 动画 序列 ,请 选择 “控制 >“ 播 放 ” 或 按 下 Ctrl+ Enter 键 快速 发 
布 SWF 文件 。 在 源 文件 FLA 保存 路 径 下 ,会 自动 生成 一 个 同名 的 SWF 文件 ,该 文件 可 
直接 双击 播放 或 插入 到 网 页 中 。 


8.4.4 文字 形变 动画 示例 


【实例 8-5】 英文 字母 FL、A、S、H 之 间 的 字形 和 颜色 随时 间 变 化 相互 平滑 过 渡 
转换 。 

步骤 如 下 : 

(1) 创建 新 文档 ,在 影片 属性 面板 中 将 影片 舞台 的 
宽 设 为 100px, 高 设 为 100px, 背 景 颜色 设 为 蓝 色 。 

(2) 单 击 * 图 层 1” 使 之 成 为 活动 层 ,选择 第 一 个 帧 。 
选择 绘图 工具 条 中 的 文字 工具 国 . 然 后 在 “属性 ”菜单 中 ， 
选择 好 字体 、 字 号 ,并 设 定 颜色 为 黄色 ,如 图 8-27 所 示 。 图 8-27 设置 字符 属性 
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把 鼠标 移 到 舞台 中 单 击 , 出 现 一 个 文字 输入 框 ,输入 字母 *F”。 选 择 箭头 工具 ,这 时 
字母 F 的 周围 出 现 一 个 蓝 线 方 框 ,表示 该 字母 已 经 成 为 一 个 组 合体 。 
选中 这 个 字母 , 单 击 绘图 工具 条 中 的 任意 变形 工具 图 ,这 时 ,F 周转 F 
出 现 缩放 手柄 。 把 这 处 字母 放大 到 合适 为 止 ,如 图 8-28 所 示 。 按 F8 
键 ,弹出 “元件 属性 ”对 话 框 ,将 字母 F 作为 “元件” 保存 为 图 形 。 依 法 
炮制 字母 L、A、S、H, 结 果 如 图 8-29 所 示 。( 提 示 : L、A、S、H 字符 如 
果 用 不 同 的 颜色 , 则 可 在 变形 的 过 程 中 有 颜色 的 变化 效果 ) 

(3) 这 时 , 单 击 “窗口 "菜单 下 的 “ 库 ” 命 令 , 就 会 发 现 图 库 窗口 中 有 5 个 符号 ,如 图 8-30 
所 示 。 


























图 8-28 字母 F 





图 8-29 字符 FL.A.S、H 的 效果 图 8-30 包括 5 个 符号 的 图 库 


(4) 将 L.A、S. 和 理 符 号 从 舞台 上 删 去 。 在 “窗口 "菜单 中 的 “设计 面板 ”下 选择 “对 
齐 ” 命 令 , 调 出 "对 齐 ” 面 板 ,选中 下 符号 ,在 “对 齐 ? 面 板 中 依次 单 击 较 .图 图 标 将 其 与 舞 
台中 心 对 齐 。 

(5) 单 击 时 间 轴 的 第 12 帧 , 按 F7 键 ,插入 空白 关键 帧 ,将 字母 L 的 符号 拖 入 舞台 ,用 
上 面 的 方法 与 舞台 中 心 对 齐 。 分 别 在 第 24 帧 .第 36 帧 、 第 48 帧 和 第 60 帧 插入 关键 帧 ， 
并 把 相应 的 字母 变 成 A、S、H.F 的 符号 拖 和 人。 用 同样 的 方法 ,将 其 与 舞台 中 心 对 齐 。( 提 
示 : 把 第 1 帧 和 第 60 帧 两 帧 都 放 上 下 的 符号 ,目的 是 为 了 让 变形 能 够 产生 循环 ) 

(6) 因为 要 制作 的 是 形状 渐变 动画 ,所 以 首先 要 把 字符 打 散 成 形体 。 选 择 第 1 帧 , 按 
Ctrl 十 B 键 ,把 字母 F 打 散 。 然 后 依次 选择 第 12、24、36、48、 和 60 帧 , 按 Ctrl 十 B 键 ,把 字 
母 L、A、S、H、 和 下 分 别 打 散 。 

(7) 现在 可 以 做 动画 了 ,选中 第 1 帧 ,在 “属性 ”面板 的 “ 补 间 ”下 拉 列 表 中 选 “ 形 状 ” 选 
项 。 然 后 分 别 对 第 12 帧 .24 帧 .36 帧 及 48 帧 都 做 如 此 操作 。 最 后 的 状态 如 图 8-31 
所 示 。 

(8) 若 想 使 文字 形变 效果 更 完美 ,可 以 适当 添加 “形变 提示 ”标识 点 。 保 存 文档 ,测试 
动画 序列 ,请 选择 “控制 >“ 播放 ”或 按 下 Ctrl 十 Enter 键 快速 发 布 SWF 文件 。 在 源 文件 
FLA 保存 路 径 下 ,会 自动 生成 一 个 同名 的 SWF 文件 ,该 文件 可 直接 双击 播放 或 插入 到 网 
页 中 。 
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图 8-31 时 间 轴 窗口 


8.5 常用 的 网 页 Flash 元 素 





8.5.1 Flash 按钮 制作 


Flash 的 交互 性 是 它 最 迷人 的 特点 ,用 户 设 计 的 动画 , 挂 到 网 上 通过 各 式 各 样 的 按钮 
交互 ,可 以 让 浏览 者 亲自 参与 控制 和 操作 影片 的 进程 。 

在 前 面 章节 已 经 介绍 过 Dreamweaver 中 制作 Flash 按钮 Flash 文本 的 方法 ,用 
Dreamweaver 生成 的 Flash 只 有 SWF 文件 而 没有 源 文件 ,而 且 实 现 的 效果 也 比较 有 限 。 
Flash 软件 也 提供 了 许多 现成 的 按钮 ,从 “窗口 ">“ 其 他 面板 ">" 公用 库 ” 中 的 “按钮 "中 
可 以 找到 ,只 要 拖 跑 到 场景 中 ,给 按钮 加 上 动作 就 可 以 了 ,但 这 是 比较 “应 付 ” 的 做 法 ,如 果 
希望 自己 做 些 个 性 化 的 按钮 ,就 需要 了 解 按钮 的 内 部 制作 原理 。 

步 又 : 

(1) 首先 ,按钮 是 Flash 三 种 元 件 (影片 剪辑 \ 按 钮 \ 图 形 ) 之 一 ,选择 “修改 ”>“ 新 建 
元 件 ” 创 建 一 个 元 件 ,并 定义 其 类 型 为 “按钮 ”。 

(2) 编辑 按钮 。 按 钮 实际 上 是 四 帧 的 交互 影片 剪辑 。 当 为 元 件 选择 按钮 行为 时 ， 
Flash 会 创建 一 个 四 帧 的 时 间 轴 。 前 三 帧 显示 按 
钮 的 三 种 可 能 状态 ;第 四 帧 定义 按钮 的 活动 区 域 。 oa 
时 间 轴 实际 上 并 不 播放 , 它 只 是 对 指针 运动 和 动 所 
作 做 出 反应 , 跳 到 相应 的 帧 ,如 图 8-32 所 示 。 

要 制作 一 个 交互 式 按钮 ,可 把 该 按钮 元 件 的 
一 个 实例 放 在 舞台 上 ,然后 给 该 实例 指定 动作 。 
必须 将 动作 指定 给 文档 中 按钮 的 实例 ,而 不 是 指定 给 按钮 时 间 轴 中 的 帧 。 

按钮 元 件 的 时 间 轴 上 的 每 一 帧 都 有 一 个 特定 的 功能 ， 

。 第 一 帧 是 弹 起 状态 ,代表 指针 没有 经 过 按钮 时 该 按钮 的 状态 。 

。 第 二 帧 是 指针 经 过 状态 ,代表 当 指 针 滑 过 按钮 时 ,该 按钮 的 外 观 。 

。 第 三 帧 是 按 下 状态 ,代表 单 击 按钮 时 ,该 按钮 的 外 观 。 

。 第 四 帧 是 “ 单 击 ?状态 ,定义 响应 鼠标 单 击 的 区 域 。 此 区 域 在 SWF 文件 中 是 不 可 

见 的 。 





图 8-32 按钮 的 四 帧 
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(3) 把 按钮 从 * 库 ?中 拖 放 到 主场 景 , 右 击 按钮 所 在 的 帧 ,选择 "动作 ”为 按钮 添加 脚本 
程序 。 在 弹出 的 “动作 ?窗口 中 , 单 击 右上 角 的 “<> "代码 片段 符号 ,如 图 8-33 所 示 。 








图 8-33 动作 窗口 


(4) 在 弹出 的 "代码 片段 "窗口 中 ,选择 “动作 ”文件 夹 >“ 单 击 以 转 到 Web 页 ”如 
图 8-34 所 示 。Flash CC 将 自动 为 按钮 创建 实例 名 称 ,在 此 例 中 为 *button_1”, 并 自动 生 
成 对 应 代码 。 


甸 


口 十 红 到 Web 页 


Den 








图 8-34 代码 片段 


(5) 在 自动 生成 的 代码 中 ,将 代码 : 


navigateToURL (new URLRequest ("http: /wadobe.camm)，"” blank"); 
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括号 内 的 URL 地 址 改 为 实际 想 要 跳 转 的 URL 即 可 ,例如 以 下 代码 : 


navigateToURL (new URIRequest ("index.html"), " blank"); 


效果 如 图 8-35 所 示 。 


button_1, addEventListener (NouseEvent. CLICK, £1_ClickToGoToWeb) 


ti £1_ClickToGoTo¥ebPage_2 (event: JouseEvent) :void 


navigateToURL (new URLRequest ( ex. htnl”), kk ); 








图 8-35 单 击 以 转 到 Web 页 的 代码 


按钮 还 有 其 他 一 些 常用 的 动作 ,可 查询 ActionScript 3.0 的 相关 帮助 信息 。 

注意 : 

(1) 按钮 元 件 内 部 可 以 建立 很 多 层 ,不 要 受到 系统 默认 只 给 一 层 的 局 限 。 

(2) 在 按钮 中 的 某 一 个 关键 帧 中 可 以 存放 影片 剪辑 ,例如 在 “指针 经 过 ”状态 关键 帧 
中 放 入 一 个 影片 剪辑 ,那么 影片 中 把 鼠标 放 到 按钮 上 ,按钮 就 会 变 成 这 个 影片 剪辑 的 
内 容 。 

(3) 在 按钮 元 件 的 编辑 状态 中 不 能 添加 动作 。 

(4) 在 按钮 中 可 以 适当 添加 响应 音效 ,例如 在 “指针 经 过 ” 帧 中 拖 放 一 个 音效 ,那么 影 
片 中 鼠标 划 过 按钮 时 ,影片 就 会 出 现 相应 的 音效 。 

(5) 在 制作 按钮 的 时 候 , 时 间 轴 下 方 的 洋 草皮 工具 是 好 伙伴 ,可 以 利用 它 比较 准确 地 
调整 这 几 个 关键 帧 的 形态 ,尤其 是 制作 “ 单 击 ”时 要 用 到 。 


8.5.2 网 页 中 的 Flash 导航 条 


为 方便 访客 浏览 ,导航 菜单 是 每 个 网 站 必 不 可 少 的 ,一 个 漂亮 精美 的 Flash 导航 菜单 
是 每 个 站 长 所 向 往 的 。Flash 导航 条 就 是 由 一 个 个 Flash 按钮 构成 的 ,也 就 是 说 ,只 要 会 
做 Flash 按钮 就 会 做 Flash 导航 条 了 。 

设计 思路 如 下 : 

(1) 制作 背景 ,为 导航 条 设计 一 个 背景 效果 。 

(2) 根据 网 站 栏目 需求 ,制作 若干 个 按钮 元 件 ,为 按钮 设计 各 种 效果 。 
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(3) 整合 主场 景 , 将 按钮 排列 起 来 ,可 以 横向 、 纵 向 排列 ,或 者 按 个 人 喜好 设计 不 规则 
排列 。 

(4) 依次 为 每 个 按钮 添加 动作 ,设置 为 按钮 添加 动作 代码 ,可 以 链接 至 网 页 或 影片 的 
其 他 帧 。 

(5) 发 布 成 SWF 文件 后 ,利用 Dreamweaver 将 Flash 动画 添加 至 网 页 。 

虽然 如 今 可 使 用 HTML5 技术 实现 简单 交互 式 的 导航 条 ,但 遇 到 复杂 造型 和 动作 需 
求 的 动画 ,还 是 Flash 实现 起 来 更 简单 ,如 图 8-36 所 示 , 为 一 个 企业 网 站 的 环形 箭头 
导航 。 


专业 的 服务 团队 


Professional services team 





图 8-36 ”企业 网 站 环形 箭头 


8.5.3 Flash Banner 制作 


现在 很 多 网 站 以 及 个 人 站 点 都 有 很 精美 的 片头 Flash 动画 ,作为 网 站 宣传 或 广告 设 
计 , 这 就 是 Banner。Banner 作为 网 幅 广 告 旗帜 广告 、 横 幅 广告 ,是 网 站 中 网 络 广告 的 主 
要 表现 形式 。Banner 是 位 于 网 页 顶部, 中部、 底部 任意 一 处 ,是 横向 贯穿 整个 或 者 大 半 个 
页 面 的 广告 条 。 

1， Banner 的 规格 

Banner 广告 有 多 种 表现 规格 和 形式 ,通常 采用 GIF 格式 的 图 像 文件 ,使 用 静态 图 形 ， 
也 可 用 多 帧 图 像 拼接 为 动画 图 像 。 但 在 现在 多 样 化 的 网 站 中 ,更 多 地 使 用 动画 、Flash 等 
方式 来 制作 Banner 广告 。 

除了 标准 标志 广告 ,早期 的 网 络 广告 还 有 一 种 略 小 一 点 的 广告 , 称 为 按钮 式 广告 
(BUTTON) ,常用 的 按钮 广告 尺寸 有 4 种 : 125 X 125 (方形 按 钮 ) ,120X90,120X60， 
88X 31。 随 着 网 络 广 告 的 不 断 发 展 ,新 形式 和 新 规格 的 网 络 广告 不 断 出 现 , 因 此 也 在 不 
断 产 生 新 的 网 络 广告 标准 。 全 屏 的 收缩 Banner 宽度 可 能 会 达到 750px 以 上 。 
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2. Banner 的 设计 思路 

由 于 Banner 广告 的 使 命 是 在 最 短 时 间 内 传达 一 个 简洁 明了 的 信息 或 意念 ,Flash 
Banner 广告 的 创作 比 一 般 意义 上 的 Flash 动画 更 为 自由 ,可 以 在 不 同 的 景物 ,文字 画面 
之 间 快 速 变化 ,以 达到 广告 的 目的 。 

运用 色彩 艺术 手段 进行 Banner 设计 的 目的 是 通过 色彩 的 泻 染 , 以 真实 亲切、 艳丽 获 
取 更 良好 的 第 一 印象 ,并 唤起 访问 者 感情 的 共鸣 ,更 有 效 地 吸引 访问 者 的 注意 ,从 而 达到 
宣传 主题 的 目的 。 

以 一 幅 西祠 胡同 网 站 的 SUV 大 赛 宣传 Flash 广告 为 例 ,西祠 设计 了 多 层 的 补 间 动 画 
广告 ,在 动画 中 使 用 了 西祠 吉祥 物 大 熊猫 作为 主要 人 物 , 几 只 大 熊猫 逐个 从 右 侧 出 现 , 进 
行 赛车 比赛 并 决 出 名 次 ,通过 动画 的 循环 播放 ,吸引 人 们 的 关注 ,如 图 8-37 所 示 。 


6 月 27 日 西 得 SUV 大 守节 敬之 此 
1 
po 呈 


6 月 27 日 西 也 SUV 大 宕 荣 潍 之 战 aa 
oe 

A 人 lase 

二 > .0 汪汪 Ry 





图 8-37 西祠 胡同 宣传 banner 


本 章 实 训 
【 实 训 1] 
熟悉 Flash 的 工作 界面 ,熟练 使 用 Flash 的 绘图 工具 ,绘制 各 种 图 形 。 
【 实 训 2] 


练习 逐 帧 动画 ,制作 如 图 8-38 所 示 的 逐 帧 动画 。 


官 半 言语 


8-38 ” 逐 帧 动画 参考 图 


【 实 训 3】 
完成 如 图 8-39 所 示 的 路 径 补 间 动 画 。 
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图 8-39 路径 补 间 动 画 参 考 图 


【 实 训 4 

参照 实例 8-5 ,完成 有志 者 事 竞 成 ”的 文字 形变 动画 。 
【 实 训 5】 

设计 网 站 的 导航 条 与 Banner。 
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Fireworks 是 Macromedia 公司 发 布 的 一 款 专 为 网 络 图 形 设计 的 图 形 编辑 软件 , 它 大 
大 简化 了 网 络 图 形 设 计 的 工作 难度 ,无 论 是 专业 设计 家 还 是 业余 爱好 者 ,使 用 Fireworks 
都 不 仅 可 以 轻松 地 制作 出 十 分 动感 的 GIF 动画 ,还 可 以 轻易 地 完成 大 图 切割 ,动态 按钮 、 
动态 翻转 图 等 ,因此 ,对 于 辅助 网 页 编辑 来 说 ,Fireworks 将 是 最 大 的 功臣 。 

2005 年 ,Macromedia 公司 被 Adobe 收购 ,Fireworks 随 之 跟随 至 Adobe。 

2013 年 5 月 ,在 宣布 终结 Creative Suite(CS) 家 族 的 同时 ,Adobe 宣布 迎 来 Creative 
Cloud(CC) 全 新 系列 应 用 和 服务 。 同 时 ,Adobe 表示 ,Fireworks 不 会 包含 在 CC 家 族 中 ， 
开发 团队 将 专注 于 开发 全 新 的 工具 来 满足 消费 者 的 需求 。 这 样 做 的 主要 原因 是 
Fireworks Photoshop Illustrator`Edge Reflow 之 间 在 功能 上 有 较 多 重 益 。 

目前 Fireworks 的 最 终 版 本 为 CS6 ,Adobe 不 再 为 其 开发 新 的 功能 ,今后 只 是 提供 必 
要 的 安全 更 新 和 bug 修复 。 


9.1 Fireworks 简介 





9.1.1 Fireworks 的 基本 功能 


Fireworks 是 用 来 设计 和 制作 专业 化 网 页 图 形 的 终极 解决 方案 。 它 是 第 一 个 可 以 帮 
助 网 页 图 形 设计 人 员 和 开发 人 员 解 决 所 面临 的 特殊 问题 的 制作 环境 。 

使 用 Fireworks, 可 以 在 一 个 专业 化 的 环境 中 创建 和 编辑 网 页 图 形 、 对 其 进行 动画 处 
理 、 添 加 高 级 交互 功能 以 及 优化 图 像 。 在 Fireworks 中 ,可 以 在 单个 应 用 程序 中 创建 和 编 
辑 位 图 和 矢量 两 种 图 形 。 可 以 设计 网 页 效果 (如 变换 图 像 和 弹出 菜单 )、 修 剪 和 优化 图 形 
以 减 小 其 文件 大 小 以 及 通过 使 重复 性 任务 自动 进行 来 节省 时 间 。 除 此 之 外 ,工作 流 可 以 
实现 自动 化 ,从 而 满足 耗费 时 间 的 更 新 和 更 改 要 求 。 

在 完成 一 个 文档 后 ,可 以 将 其 导出 或 另存 为 JPEG 文件 .GIF 文件 或 其 他 格式 的 文 
件 , 与 包含 HTML 表格 和 JavaScript 代码 的 HTML 文件 一 起 用 于 网 页 。 如 果 想 继续 使 
用 其 他 应 用 程序 (如 Photoshop 或 Flash) 编 辑 该 文档 ,还 可 以 导出 特定 于 相应 应 用 程序 的 
文件 类 型 。 
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9.1.2 Fireworks 的 工作 界面 


启动 Fireworks CS6 之 后 ,默认 情况 下 并 没有 打开 任何 文档 , 按 Ctrl 十 N 组 合 键 ,新 
建 一 个 文档 或 者 按 Ctrl+O 组 合 键 打开 一 个 文档 ,此 时 它 的 界面 如 图 9-1 所 示 。 
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图 9-1 Fireworks CS6 的 工作 界面 


Fireworks 的 工作 界面 由 “菜单 栏 ”“ 工 具 栏 “工作 区 ”、“ 工 具 条 ”“ 组 合 面板 ”和 


“属性 框 ?6 个 部 分 组 成 。 


“工作 区 ”窗口 出 现在 应 用 程序 的 中 心 。 在 工作 区 上 不 仅 可 以 绘制 矢量 图 ,也 可 以 直 


接 处 理 点 阵 图 (位 图 )。 工 作 区 上 有 4 个 选项 卡 ,当前 是 “原始 ?选项 窗 ,也 就 是 工作 区 ,只 
有 在 此 窗口 中 才能 编辑 图 像 文件 。 而 在 “预览 选项 窗 中 则 可 以 模拟 浏览 器 预览 制作 好 的 


。“2 幅 " 和 "4 幅 ?选项 卡 则 分 别 是 在 2 个 和 4 





量 和 网 页 工具 组 。 


个 窗口 中 显示 图 像 的 制作 内 容 。 





“工具 条 ”位 于 屏幕 的 左 侧 , 该 面板 分 成 了 多 个 类 别 并 用 标签 标明 ,其 中 包括 位 图 、 矢 


“组 合 面板 ”多 达 18 个 ,分 别 为 * 优 化、 层 、 公 用 库 .CSS 属性 、 页 面 , 状 态 、 历 史记 录 、 自 
动 形 状 、 样 式 .文档 库 .URL、 混 色 器 ,样本 ,信息 ,行为 .查找 和 蔡 换 对齐 和 路 径 面板 ”等 。 





每 个 面板 既 可 相互 独立 进行 排列 又 可 与 其 他 面板 组 合成 一 个 新 面板 。 但 各 面板 的 功能 依 


然 相互 独立 ,都 是 浮动 的 控件 ,每 个 面板 都 是 可 拖 动 的 。 





选择 对 象 或 选取 工具 的 时 候 ,其 相关 信息 都 会 在 


“属性 ?检查 器 默认 情况 下 出 现在 文档 的 底部 , 它 最 初 显示 文档 的 属性 。 然 后 , 当 





属性 面板 中 显示 出 来 。 同 时 也 可 以 通 


过 修改 属性 面板 中 的 数据 或 内 容 来 调整 图 像 的 相关 属性 。 例 如 图 像 的 大 小 、 位 置 及 色 
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9.1.3 Fireworks 的 基本 操作 


1. 新 建 Fireworks 文档 

当选 择 “ 文 件 ”>“ 新 建 " 在 Fireworks 中 创建 新 文档 时 ,创建 的 是 可 移植 网 络 图 形 ( 即 
PNG) 文 档 。PNG 是 Fireworks 的 本 身 文 件 格式 。 在 Fireworks 中 创建 图 形 之 后 ,可 以 
将 它们 以 其 他 熟悉 的 网 页 图 形 格式 (如 JPEG、GIF 和 GIF 动画) 导出。 还 可 以 将 图 形 导 
出 为 许多 流行 的 非 网 页 用 格式 ,如 TIFF 和 BMP。 无 论 选 择 哪 种 优化 和 导出 设置 ,原始 
的 Fireworks PNG 文件 都 会 被 保留 ,以 便 以 后 进行 编辑 。 

新 建文 档 的 步骤 如 下 。 

(1) 选择 “文件 ”菜单 中 的 “新 建 "命令 (或 按 Ctrl+N 快捷 键 ), 打 开 * 新 建文 档 ” 对 话 
框 ,如 图 9-2 所 示 。 





9-2 新 建 Fireworks 文档 


(2) 在 打开 的 对 话 框 中 输入 宽度 (文档 在 水 平方 向 上 的 尺度 ) 和 高 度 ( 文 档 在 垂直 方 
向 上 的 尺度 ) 的 设 定数 值 ,单位 可 以 是 像素 ,英寸 或 者 厘米 。 

(3) 输入 指定 的 分 辩 率 ,单位 是 “像素 /英寸 "或 者 "像素 /厘米 "。 对 于 在 Web 上 显示 
的 图 像 ,通常 设置 为 "72 像素 /英寸 ”。 

(4) 画布 颜色 的 设置 有 三 种 选择 ,分 别 为 “ 白 "“ 透 明和 * 自 定义 ”。 如 果 指定 自 定义 
颜色 ,可 以 使 用 颜色 面板 进行 选择 。 

(5) 将 所 需 的 选项 设置 好 之 后 , 单 击 * 确 定 "按钮 , 则 可 以 打开 新 文档 进行 创作 。 

2. 图 像 文件 的 导入 

通过 菜单 栏 中 的 “文件 >“ 打开” 命令 或 工具 栏 中 的 “打开 ”按钮 即 可 启动 打开 文件 对 
话 框 ,如 图 9-3 所 示 。 

选中 要 导入 的 图 形 文件 后 在 右边 的 预览 框 内 会 显示 该 文件 的 预览 图 。 选 中 “打开 为 
未 命名 ”项 是 把 选中 的 文件 作为 无 名 的 文件 打开 。 选 中 “以 动画 打开 ”项 是 把 选中 的 文件 
作为 动画 打开 。Fireworks 还 支持 一 次 性 同时 打开 多 个 相 邻 或 不 相 邻 的 文件 ,也 可 以 直 
接 打开 或 导入 Photoshop 制作 的 PSD 格式 文件 进行 编辑 处 理 。 





152 ，。 网 站 建设 与 网 页 设计 项 目 化 教程 











四 打开 为 “未 全 名 " QD 
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图 9-3 打开 文件 对 话 框 


3. 修改 画布 属性 

Fireworks 中 的 画布 也 就 相当 于 图 像 的 背景 ,在 绘图 的 过 程 中 为 了 使 画布 的 大 小 或 
色彩 能 够 和 前 景 的 图 像 保持 协调 ,经 常 要 修改 画布 的 相关 属性 。 方 法 是 : 用 鼠标 单 击 画 
布 ,或 在 画布 的 工作 区 外 单 击 一 下 ,从 而 在 属性 栏 中 调 出 画布 的 属性 对 话 框 ,如 图 9-4 
所 示 。 





图 9-4 画布 属性 面板 


修改 画布 颜色 : 在 该 属性 对 话 框 中 , 单 击 画布 颜色 选择 框 ,可 以 重新 选择 新 的 画布 
颜色 。 

“画布 大 小 ”: 单 击 “ 画 布 大 小 ”按钮 将 弹出 设置 对 话 框 ,从 中 可 以 看 到 ,当前 画布 的 宽 
为 940 像素 ,高 是 466 像素 。 在 “新 尺寸 "项 内 可 以 输入 新 的 宽 、 高 像素 值 。 在 “ 锚 定 ” 右 边 
是 画布 的 固定 点 , 当 画 布 的 大 小 被 改变 时 会 以 选中 的 固定 点 不 变 来 更 改 画 布 的 大 小 ,如 
图 9-5 所 示 。 

“图 像 大 小 ”: 对 于 图 像 区 域 大 小 的 改变 ,也 可 以 通过 画布 的 属性 对 话 框 中 的 “图 像 大 
小 ”进行 修改 ,如 图 9-6 所 示 。 

在 “像素 尺寸 "项 下 可 以 设置 工作 区 的 宽 、 高 度数 值 。 选 中 “约束 比例 ”项 后 , 当 宽度 或 
高 度 中 某 一 数值 被 改 后 , 另 一 个 数值 也 会 等 比例 地 随 着 改变 。 如 果 取 消 此 项 选择 ,就 可 以 
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图 9-6 修改 图 像 大 小 


单独 改变 宽度 或 高 度 的 数值 了 。“ 图 像 重新 取样 ”项 是 设置 图 像 的 重新 取样 功能 。 
“符合 画布 ”: 这 是 Fireworks 的 独 有 功能 ,可 以 使 画布 大 小 与 图 像 所 占用 的 位 置 大 
小 一 致 。 
4. 保存 Fireworks 文件 
(1) 保存 Fireworks PNG 文件 
当 创 建新 文档 或 打开 现 有 的 Fireworks PNG 文件 时 , 这些 文 档 的 文件 扩展 名 为 
. png。 Fireworks 文档 窗口 中 显示 的 文件 是 源 文件 , 即 工作 文件 。 
使 用 Fireworks PNG 文件 作为 源 文件 具有 以 下 优点 : 
。 源 PNG 文件 始终 是 可 编辑 的 。 即 使 将 该 文件 导出 以 供 在 网 页 上 使 用 后 , 仍 可 以 
返回 并 进行 其 他 更 改 。 
。 可 以 在 PNG 文件 中 将 复杂 图 形 分 割 成 多 个 切片 ,然后 将 这 些 切片 导出 为 具有 不 
同文 件 格式 和 不 同 优化 设置 的 多 个 文件 。 
保存 PNG 文件 ,直接 选择 "文件 ”保存 ”命令 , 若 从 其 他 格式 另存 为 PNG 格式 , 选 
择 " 文 件 ” 一 “另存 为 ”。 
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(2) 以 其 他 格式 保存 文档 

在 Fireworks 中 创建 并 优化 图 形 后 ,用 户 可 将 该 图 形 输出 为 常用 的 Web 格式 及 供 其 
他 程序 (如 Freehand) 使 用 的 矢量 图 形 格式 。Fireworks CS6 由 于 它 的 面向 网 络 的 特性 ， 
导出 的 形式 可 以 不 仅仅 是 图 像 , 还 可 以 是 包含 各 种 链接 和 JavaScript 信息 的 完整 的 网 页 。 

可 以 选择 “保存 "命令 来 保存 任何 文件 类 型 的 图 像 ,但 对 于 Fireworks 不 能 直接 保存 
的 图 像 格式 ,将 文档 导出 为 其 他 格式 : 在 “优化 ”面板 中 选择 文件 格式 ,选择 “文件 ”一 “图 
像 预览 ”命令 导出 文档 ,可 以 打开 如 图 9-7 所 示 的 导出 预览 窗口 。 它 包含 了 两 部 分 , 左 侧 
为 参数 设置 部 分 , 右 侧 为 输出 预览 部 分 。 
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图 9-7 导出 预览 


9.2 位 图 的 处 理 


9.2.1 常用 的 位 图 工具 


创作 图 像 之 前 ,必须 先 对 Fireworks 的 处 理 图 像 工具 非常 熟悉 ,这 样 才能 完成 预想 的 
效果 。Fireworks CS6 的 “工具 条 ”中 增加 了 不 少 新 工具 ,并 与 原 有 的 工具 在 一 起 被 编排 
为 6 个 类 别 : 选择 区 、 位 图 .矢量 `.Web、 颜 色 和 视图 区 。 有 些 工具 按钮 的 右 下 角 有 一 个 小 
三 角 , 说 明 这 个 工具 包含 有 其 他 几 种 不 同 的 工具 , 按 住 这 个 工具 按钮 不 放 就 能 显示 其 他 的 
工具 ,如 图 9-8 所 示 。 
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抵 形 选取 框 / 精 圆 形 选取 杠 套 索 /多 边 形 套 索 
魔术 棒 刷子 
铅 橡皮 擦 
模糊 / 锐 化 / 减 淡 /烙印 /涂抹 橡皮 图 章 /替换 颜色 /红眼 消除 
图 9-8 位 图 工具 


1. 选区 工具 


如 图 9-8 所 示 , 在 位 图 工具 的 主要 工具 中 ,其 中 的 矩形” “椭圆 形 "“ 套 索 "“ 多 边 形 
套 索 " 和 ”魔术 棒 ? 工 具 都 用 于 约束 位 图 的 编辑 范围 ,所 有 的 位 图 编辑 例如 剪 切 、 复 制 ,填充 
等 只 能 在 该 范围 内 有 效 。 

(1) 选区 工具 国 : 用 选区 工具 选取 的 区 域 以 转动 的 黑白 线 (蚂蚁 线 ) 表 示 , 如 图 9-9 
所 示 。 取 消 选 区 时 可 先 单 击 选取 工具 ,然后 单 击 选区 以 外 的 任何 地 方 。 

在 选取 框 的 属性 面板 上 显示 了 目前 该 选取 框 的 大 小 及 坐标 位 置 等 相关 信息 ,如 图 9-9 
所 示 。 
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图 9-9 选取 工具 


边缘 选项 可 以 对 选区 边缘 的 硬化 程序 进行 设置 。 

， 实 边 一 一 选区 边缘 呈 锯 齿 状 ,没有 任何 的 柔 化 过 渡 。 

。 消除 锯齿 一 一 可 使 选区 边缘 有 最 基本 的 柔 化 。 

， 羽化 一 一 可 以 消除 选取 区 域 的 正常 硬 变 边缘 ,使 其 柔 化 。 也 就 是 使 边界 产生 一 个 
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过 渡 段 ,该 选项 的 取 值 为 0~100, 数 值 越 大 , 柔 化 程度 也 越 大 。 
(2) 套 索 工具 图: 可 以 随意 圈 画 出 所 要 的 选取 范围 ,主要 用 于 选取 一 些 不 规则 的 图 
形 选区 ,如 图 9-10 所 示 。 如 果 选 取 的 曲线 终点 和 起 点 未 重合 ,Fireworks 会 自动 封闭 成 完 
整 的 线圈 。 





图 9-10 套 索 工具 


(3) 魔术 棒 工 具 国 ( 图 9-11) : 这 是 一 个 神奇 的 选取 工具 。 可 以 用 来 选取 图 像 中 颜色 
相似 的 区 域 , 当 用 魔术 棒 单 击 图 像 上 某 个 点 时 ,与 该 点 颜色 相近 的 区 域 将 被 选中 ,可 以 在 
一 些 情况 下 节省 大 量 的 精力 来 达到 意 想不到 的 效果 。 

通过 魔术 棒 工 具 的 属性 对 话 框 可 以 设置 色彩 的 容 差 值 和 边缘 的 柔 化 度 。 容 差 值 越 
大 ,所 选取 的 范围 也 越 大 。 

2. 图 像 修改 工具 

(1) 橡皮 擦 工具 贺 : 用 于 擦 除 位 图 的 颜色 。 和 使 用 画笔 一 样 ,在 选中 橡皮 工具 后 , 按 
住 鼠 标 左 键 在 图 像 上 拖 动 即 可 。 

(2) 模糊 工具 贺 : 该 工具 的 工作 原理 就 是 降低 像素 之 间 的 反差 ,使 图 像 产生 模糊 效 
果 , 如 图 9-12 所 示 。 

(3) 锐 化 工具 国 : 与 “模糊 "工具 正好 相反 ,“ 锐 化 ”工具 是 用 于 加 深 像素 之 间 的 反差 ， 
使 图 像 更 加 锐 化 。 

(4) 橡皮 图 章 工具 图: 用 来 克隆 图 像 的 部 分 区 域 ,以 便 将 其 压 印 到 图 像 中 的 其 他 区 
域 。 在 使 用 时 先 要 把 鼠标 移 到 想 要 复制 的 图 像 上 ,然后 单 击 鼠 标 左 键 以 确定 复制 的 起 点 ， 
然后 拖 动 鼠标 在 图 像 的 任意 位 置 开始 复制 。 
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(a) 模糊 前 (b) 模糊 后 
9-12 ”模糊 前 后 


9.2.2 位 图 操作 简单 实例 


1. 位 图 裁剪 

可 以 把 Fireworks 文档 中 的 单个 位 图 对 象 隔 离开 ,只 裁剪 位 图 对 象 而 使 画布 上 的 其 
他 对 象 保持 不 变 。 

【实例 9-1】 在 不 影响 文档 中 其 他 对 象 的 情况 下 载 前 位 图 图 像 。 

步骤 如 下 : 

(1) 选择 位 图 对 象 ,在 工具 条 上 选择 裁剪 工具 国 。 

(2) 裁剪 手柄 出 现在 整个 所 选 位 图 的 周围 ,调整 裁剪 手柄 ,直到 定 界 框 围 在 位 图 图 像 
中 要 保留 的 区 域 周围 ,如 图 9-13 所 示 。 注 意 : 若 要 取消 裁剪 选择 ,可 按 Esc 键 。 

(3) 双击 定 界 框 内 部 或 按 Enter 键 裁剪 选区 。 所 选 位 图 中 位 于 定 界 框 以 外 的 每 个 像 
素 都 被 删除 ,而 文档 中 的 其 他 对 象 保持 不 变 。 
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图 9-13 定 界 框 


2. 抠 图 .去 背景 

在 对 位 图 进行 抠 图 操作 时 ,最 常用 到 的 操作 就 是 羽化 ,羽化 是 将 边界 虚 化 ,而 里 面 内 
容 不 会 模糊 。 其 最 大 的 作用 就 是 在 抠 图 时 对 比较 绒 的 东西 (比如 毛发 毛衣 等 ) 的 边界 进 
行 选取 时 ,可 以 取得 比较 好 的 效果 。 

【实例 9-2】 完成 不 规则 图 像 的 抠 图 。 

操作 步骤 如 下 ， 

(1) 打开 一 个 图 片 。 

(2) 选择 “工具 ”面板 “位 图 ”部 分 的 "选取 框 " 工 具 或 “ 套 索 "工具 。 

(3) 在 属性 检查 器 中 ,在 “边缘 ?项 中 选择 “羽化 ”, 调 整 羽 化 大 小 。 羽 化 值 越 大 ,膀胱 
范围 越 宽 ,羽化 值 越 小 ,膀胱 范围 越 窗 。 另 外 一 种 “消除 锯齿 ?也 是 一 种 微小 的 羽化 ,这 样 
可 以 使 选区 边缘 看 上 去 更 平滑 。 

(4) 选择 部 分 图 像 ,如 图 9-14 所 示 。 选 框 内 叫 作 选 
区 , 选 框 外 叫 作 蒙 版 。 在 Fireworks 中 ,所 有 操作 都 是 在 
选区 内 实现 的 ,设置 了 羽化 ,所 有 操作 就 会 向 选 框 外 的 蒙 
版 过 渡 , 而 且 数 值 越 大 ,过 渡 越 远 越 缓和 。 

(5) 打开 “选择 ”菜单 ,选择 “反选 ”命令 ,如 图 9-15 
所 示 。 

(6) 反选 过 的 图 像 ,会 将 抠 图 区 域 以 外 的 区 域 选中 ， 
然后 按 Delete 键 ,将 背景 删除 ,修改 适合 的 文档 背景 色 ， 
得 到 抠 图 羽化 边缘 后 的 效果 ,如 图 9-16 所 示 。 图 9-14 选 定 要 抠 出 来 的 

图 像 区 域 
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图 9-15 反选 图 9-16 抠 图 后 的 效果 


3. 图 文 处 理 

【实例 9-3】 制作 环绕 文字 。 

步骤 如 下 ， 

(1) 新 建 宽 和 高 都 是 300 像素 的 文件 ,背景 设 为 白色 。 选 择 * 工 具 ? 面 板 中 的 “文本 ” 
工具 ,在 工作 区 输入 文本 http: //www. zdxy. cn 字体 选择 “Arial”, 字 号 为 20 像素 大 小 ， 
颜色 为 黑色 ,如 图 9-17 所 示 。 





图 9-17 输入 文字 
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(2) 选择 “工具 ”面板 “矢量 ”部 分 的 “椭圆 "工具 。 按 住 Shift 键 ,在 工作 区 画 一 个 圆 ， 
如 图 9-18 所 示 。 


http://www.zdxy.cn 





图 9-18 夯 一 个 圆 


(3) 在 属性 面板 中 ,将 圆 的 填充 修改 为 透明 色 ,设置 “ 描 边 ” 为 1 像素 宽 ,1 像素 柔 化 ， 
如 图 9-19 所 示 。 


oe Sp 可 DBIBj| 台 本 | 站 [kj 
HE | [Waa “|a| ID 

Ea -可 

I» L 





图 9-19 设置 圆 的 属性 


(4) 按 住 Shift 键 , 使 用 “指针 ?工具 同时 选择 圆 和 文字 。 打 开 菜单 栏 的 文本 ”菜单 ， 
单 击 “附加 到 路 径 ”, 环 绕 文字 就 做 好 了 ,如 图 9-20 所 示 。 





图 9-20 附加 到 路 径 
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(5) 如 果 想 旋转 文字 ,选择 “工具 ?面板 中 的 “缩放 工具 ”, 出 现 圆 形 箭头 ,就 可 以 旋转 
文字 ,如 图 9-21 所 示 , 旋 转 到 合适 角度 即 可 。 如 果 和 希望 文本 沿路 径 的 内 侧 排列 ,选择 " 文 
本 ”菜单 中 的 “倒转 方向 ”。 


图 9-21 旋转 文字 


9.3 利用 Fireworks 制作 Web 特效 





9.3.1 层 


图 层面 板 是 自由 独立 于 Fireworks 工作 空间 里 面 的 一 个 面板 。 在 这 个 神奇 的 图 层 里 
面 ,我 们 可 以 实现 缩放 、 更 改 颜色 ,设置 样式 、 改 变 透明 度 等 操作 。 一 个 图 层 代表 了 一 个 单独 
的 元 素 , 设 计 师 可 以 任意 更 改 之 。 图 层 可 以 说 在 网 页 设计 中 起 着 至 关 重 要 的 作用 。 它 们 用 
来 表示 网 页 设计 的 元 素 ,它们 是 用 来 显示 文本 框 ` 图 像 .背景 ,内 容 和 更 多 其 他 元 素 的 基底 。 

大 多 数 Fireworks 的 使 用 者 都 同意 : 分 层 是 Fireworks 软件 的 关键 特性 之 一 ,同时 良 
好 的 分 层 有 助 于 设计 更 完美 的 展示 和 修改 。 

如 图 9-22 所 示 即 为 一 张 精 细 分 层 设计 图 。 
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图 9-22 图 层 
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在 该 示例 中 ,该 PNG 图 片 被 分 为 若干 层 与 层 分 组 。 图 层 研 究 是 一 件 非常 烦琐 的 事 
儿 , 因 为 它 需要 花 大 量 的 时 间 和 精力 。 但 是 层 是 非常 重要 的 ,我 们 必须 学 好 它 。 


9%.3.2 制作 按钮 


对 于 Flash 来 说 ,“ 库 ”是 非常 重要 的 一 个 概念 ,在 Flash 的 “ 库 ” 面 板 中 可 以 保存 当前 
影片 中 所 用 到 的 所 有 元 件 \、 位 图 、 声 音 和 视频 。 它 就 好 像 是 一 个 仓库 ,不 但 可 以 保存 当前 
影片 中 所 有 的 素材 ,还 可 以 不 断 地 进行 调用 ,而 且 不 会 增加 文件 量 ,同样 的 “ 库 ” 的 概念 在 
Fireworks 中 也 有 。 但 是 在 Fireworks 9 以 前 的 版 本 中 ,“ 库 ”和 “元 件 ” 的 主要 作用 一 个 是 
可 以 帮助 用 户 通过 补 间 实 例 的 方法 来 制作 过 渡 图 形 . 还 有 就 是 来 制作 GIF 动画 和 网 站 中 
的 交互 按钮 。 相 对 于 Flash,Fireworks 中 “ 库 ” 和 “元 件 ” 的 重要 性 远 远 不 如 Flash, 可 以 说 
在 进行 图 形 绘制 的 时 候 是 不 一 定 必 须 使 用 到 “元 件 ” 和 “ 库 ” 的 。 

在 Fireworks CS6 中 ,“ 库 ”的 作用 被 大 大 增强 了 ,在 “窗口 "菜单 中 ,多 了 一 个 “公用 
库 ” 选 项 。 用 户 可 以 通过 使 用 “公用 库 ” 添 加 很 多 默认 的 设计 原型 与 样式 ,如 二 维 对 象 , 动 
画 、 按 钮 ,光标 ,Flex 组 件 . 手 势 .HTML、 图 标 iPhone、 菜单 栏 等 。 

【实例 9-4】 在 Fireworks 中 制作 按钮 。 

步骤 如 下 : 

(1) 新 建 一 个 文档 ,在 “新 建文 档 对 话 框 中 设置 宽度 为 100 像素 ,高 度 为 30 像素 ,分 
辩 率 为 72 像素 /英寸 ,设置 画布 的 颜色 为 “ 白 ”, 最 后 单 击 “ 确 定 ” 按 钮 。 

(2) 单 击 “ 公 用 库 ? 面 板 中 的 “按钮 ?选项 卡 , 然 后 选择 一 种 按钮 样式 拖 人 画布 ,并 调整 
其 显示 位 置 和 大 小 ,如 图 9-23 所 示 。 





9-23 ”绘制 按钮 


(3) 选择 “窗口 >“ 元 件 属性 ”命令 ,打开 Fireworks CS6 的 元 件 属性 面板 ,效果 如 
图 9-24 所 示 。 
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图 9-24 元 件 属性 面板 


(4) 选中 画布 中 的 按钮 元 件 , 这 时 其 相应 的 属性 在 元 件 属性 面板 中 显示 出 来 。 可 以 
通过 更 改 这 些 元 件 属性 的 值 ,从 而 改变 画布 中 元 件 的 属性 效果 。 
修改 后 的 按钮 如 图 9-25 所 示 。 








图 9-25 修改 后 的 效果 


同样 地 ,在 Fireworks CS6 的 公用 库 中 所 提供 的 默认 元 件 都 可 以 进行 二 次 修改 ,这 样 
使 得 同一 元 件 在 重复 应 用 上 有 了 更 多 的 变化 ,更 加 适合 大 型 项 目的 制作 。 

Fireworks 9 中 ,所 有 的 公用 库 元 件 都 保存 在 安装 目录 的 “First Run\Common 
Library” 文 件 夹 中 ,通过 观察 ,可 以 发 现 每 个 元 件 都 由 一 个 PNG 的 图 形 文件 和 一 个 JSF 
文件 组 成 ,如 图 9-26 所 示 。 
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图 9-26 公用 库 文件 夹 


9.4 绘制 图 形 


9.4.1 常用 的 绘图 工具 


和 许多 主流 的 图 像 处 理 软件 一 样 ,Fireworks 的 绘图 工具 主要 都 集中 在 “工具 条 ”上 。 
利用 这 些 工 具 可 以 绘制 出 各 种 图 形 , 并 可 为 其 设置 相应 的 属性 ,如 颜色 .大 小 .位 置 等 ,如 
图 9-27 所 示 。 

1. 自由 笔 刷 工 具 

刷子 工具 殉 和 铅笔 工具 加 都 可 以 直接 在 画布 上 画 出 任意 线条 ,如 图 9-28 所 示 。 

在 “刷子 ?工具 的 属性 对 话 框 中 可 以 对 刷子 的 色彩 .大 小 .笔触 类 型 .边缘 柔 化 值 、 纹 
理 , 纹 理 透明 度 、 刷 子 透 明度 、 色 彩 模式 等 进行 设置 。 

在 铅笔 的 属性 框 中 同样 可 以 对 线段 的 色彩 .是 否 选用 柔 化 .透明 度数 值 .自动 擦 除 等 
进行 设置 。 

2. 路 径 形状 工具 

(1) 直线 工具 NN : 使 用 "直线 ?工具 可 以 在 画布 上 直接 画 出 直线 , 当 按 住 Shift 键 时 可 
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9-28 ”刷子 与 铅笔 工具 


以 画 出 水 平 ,垂直 ,45 度 角 的 直线 。 
(2) 钢笔 工具 圈 : 选中 "钢笔 "工具 后 单 击 画布 上 的 不 同位 置 ,可 以 画 出 由 线段 组 成 
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的 直线 路 径 。 如 果 单 击 后 不 松 开 , 而 是 拖 动 鼠标 ,这 样 画 出 来 的 路 径 就 是 曲线 路 径 ,通过 
调整 曲线 的 两 条 控制 线 可 以 设 定 曲线 的 弯曲 度 。 

(3) 自由 变形 工具 勋 : 可 以 直接 对 矢量 路 径 进行 杰 曲 和 变形 操作 ,而 不 是 对 各 个 节 
点 执行 操作 。Fireworks 在 更 改 矢量 路 径 的 形状 时 会 自动 添加 、 移 动 或 删除 路 径 上 的 
节点 。 

(4) 路 径 切割 工具 闫 : 该 工具 用 于 切割 类 如 钢笔 路 径 这 样 的 矢量 路 径 。 使 用 时 从 要 
切割 处 按 住 鼠 标 左 键 移动 划 过 。 在 切割 处 会 增加 一 个 控制 点 。 使 用 “细部 ”工具 移动 一 端 
就 可 以 把 线段 分 开 了 。 

(5) 形状 工具 又 被 分 为 “基本 形状 "和 “自动 形状 ”, 基 本 形状 : 有 矩形 .椭圆 形 和 多 
边 形 这 些 简单 的 几何 图 形 。 使 用 时 只 需 在 画布 上 用 鼠标 进行 拖 丰 即 可 画 出 相应 的 
图 形 。 

当 按 住 Shift 键 不 放 的 时 候 可 以 画 出 正方 形 和 圆 形 ,在 各 形状 工具 的 属性 框 中 都 可 
以 方便 地 为 这 些 图 形 选 择 不 同 的 填充 模式 加 以 填充 。 通 过 颜色 的 调节 手柄 可 以 自由 地 控 
制 颜色 的 填充 方向 及 范围 。 

3. 色彩 填充 工具 


(1) 滴 管 工具 腾 : 用 于 从 图 像 中 选取 颜色 来 指定 一 种 新 的 笔触 颜色 或 填充 色 。 可 
以 选取 单个 像素 的 颜色 、3X3 像素 区 域内 的 平均 颜色 值 或 5X5 像素 区 域内 的 平均 颜 
色 值 。 

(2) 油漆 桶 工具 网 : 在 绘制 时 应 用 于 位 图 和 矢量 对 象 的 “矩形 "“ 圆 角 和 矩形 “椭圆 ” 
和 多边形" 等 绘制 工具 的 填充 属性 。 当 前 的 填充 会 出 现在 属性 对 话 框 “工具 条 ”面板 和 
组 合 面板 中 的 “ 混 色 器 "面板 中 。 可 以 使 用 这 些 面 板 中 的 任何 一 个 来 更 改 * 油 漆 桶 "工具 的 
填充 色 。 

在 “油漆 桶 "的 属性 对 话 框 中 可 以 看 到 ,该 工具 的 填充 类 别 有 实 心 填充 、 网 页 拌 动 、 渐 
变 填 充 和 图 案 填 充 4 种。 其 中 各 种 填充 方式 又 有 诸多 色彩 及 样式 可 供 选 择 。 


9.4.2 绘制 草图 


1. 什么 是 页 面 草图 

虽然 网 页 最 终 是 以 计算 机 屏幕 显示 为 目的 的 ,但 最 初 的 设计 还 是 需要 动笔 勾画 页 面 
草图 。 页 面 草 图 的 目的 是 将 脑海 里 腾 胱 的 想法 具体 化 , 变 成 可 视 可 见 的 轮廓 ,作为 进一步 
深入 细 化 的 基础 。 它 也 许 是 几 条 线 , 几 个 色 块 ,但 它 决 定 着 将 来 网 页 的 基本 面貌 。 

页 面 草图 类 似 一 个 创意 , 它 是 连接 艺术 思想 与 作品 制作 的 桥梁 ,网 页 设计 的 精髓 正 是 
在 这 时 显露 出 来 。 

2. 页 面 草图 实例 一 一 轮廓 图 

在 Fireworks 中 使 用 各 种 绘图 工具 可 以 轻松 地 进行 网 页 草图 的 绘制 ,例如 ,图 9-29 
所 示 的 就 是 一 个 轮廓 图 。 该 草图 是 一 个 网 页 的 轮廓 ,可 以 作为 进一步 设计 的 基础 ,也 可 直 
接 作为 “跟踪 图 像 "来 指导 网 页 制作 。 
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图 9-29 草图 


9.5 Fireworks 与 Dreamweaver 结合 





9.5.1 使 用 Fireworks 规划 网 页 布局 


设计 的 第 一 步 是 设计 版 面 布局 。 可 以 将 网 页 看 作 传统 的 报刊 杂志 来 编辑 ,这 里 面 有 
文字 、 图 像 力 至 动画 ,要 做 的 工作 就 是 以 最 适合 的 方式 将 图 片 和 文字 排放 在 页 面 的 不 同 
位 置 。 

在 构思 开始 ,设计 师 的 脑海 里 不 可 能 是 空白 的 ,不 可 能 完全 不 受 现 有 的 网 页 设计 的 影 
响 。 借 鉴 现 有 的 设计 样式 ,这 在 创作 中 是 很 常见 的 事 。 草 图 的 构思 ,创意 的 产生 ,往往 来 
自 于 一 些 现 有 的 设计 作品 、 图 形 图 像素 材 的 组 合 、 改 造 和 加 工 , 当然 不 能 不 加 改造 地 照抄 
照搬 。 汲 取 成 功 作品 中 的 一 些 视觉 元 素 及 其 组 合 方式 ,加 入 自己 的 新 元 素 , 形 成 新 的 组 
合 , 其 思维 方式 是 借鉴 重组 和 逆向 模仿 。 这 种 借鉴 重组 可 以 比较 顺利 地 产生 网 页 的 方案 

首页 又 叫 主页 ,是 浏览 者 访问 一 个 站 点 时 看 到 的 第 一 页 ,通过 它 的 链接 ,进而 浏览 站 
点 的 其 他 页 面 。 一 般 情 况 下 ,首页 的 名 字 叫 作 “index. html”。 

首页 好 比 书 的 封面 ,首页 的 设计 是 一 个 网 站 能 不 能 吸引 人 的 关键 。 访 问 者 往往 看 到 
首页 就 已 经 对 站 点 有 一 个 整体 的 感觉 。 是 不 是 能 够 促使 浏览 者 继续 单 击 进入 ,是 否 能 够 
吸引 浏览 者 留 在 站 点 上 ,全 赁 首页 设计 的 水 平 了 。 所 以 ,首页 的 设计 和 制作 一 定 要 特别 
重视 。 

根据 经 验 , 可 以 把 现 有 网 站 的 首页 大 致 分 为 以 下 三 种 类 型 。 

(1) 书籍 封面 式 首页 : 有 的 大 型 网 站 往往 有 一 个 书籍 封面 式 的 首页 ,上 面 只 有 一 个 
“进入 "链接, 单 击 之 后 才 进 入 网 站 。 这 种 首页 设计 精美 ,非常 考究 ,给 人 以 雍容 大 度 的 
气派 。 


(2) 期 刊 杂 志 式 的 首页 : 与 书籍 封面 式 首页 相似 ,但 在 首页 上 有 站 点 全 部 内 容 的 目 
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录 索 引 , 图 文 并 茂 , 看 上 去 就 像 是 期 刊 杂志 的 封面 , 既 漂亮 ,又 使 网 站 的 主要 内 容 一 目 了 
然 ,是 一 种 值得 推荐 的 形式 。 

(3) 报纸 式 的 首页 : 许多 电子 商务 网 站 、 搜 索引 擎 和 新 闻 信 息 网 站 更 加 务实 ,为 了 速 
度 和 操作 的 简便 ,往往 采用 报纸 式 的 首页 设计 ,将 栏目 索引 、 功 能 模块 .具体 内 容 一 并 显示 
在 首页 ,看 上 去 就 像 一 张 报纸 的 头 版 一 样 。 

为 站 点 设计 什么 样 的 首页 ,要 看 具体 情况 而 定 。 如 果 是 艺术 类 的 站 点 ,或 者 可 以 确定 
内 容 独 特 , 可 以 吸引 浏览 者 进一步 单 击 进 入 的 站 点 ,是 可 以 设计 一 个 书籍 封面 式 的 首页 。 
如 ELLE. com 具有 很 强 的 欣赏 性 ,忠实 的 客户 群 ,有 必要 以 此 来 显示 自己 的 特色 和 品位 。 
否则 的 话 ,书籍 封面 式 的 首页 并 不 会 给 站 点 带 来 什么 好 处 。 电 子 商 务 网 站 要 的 首先 是 上 
网 浏览 的 速度 ,有 价值 的 信息 ,如 果 客 户 等 待 几 分 钟 ,只 看 到 一 幅 画面 ,那么 他 是 不 会 有 耐 
心 等 待 进入 下 一 页 的 。 

设计 时 先 要 确定 网 页 外 形 尺寸 ,目前 一 般 网 站 的 显示 基准 以 1024 像素 X768 像素 为 
标准 ,网 页 的 横 宽 不 要 超过 1000 像素 ,不 然 的 话 , 超 出 部 分 只 有 借助 滚动 条 才能 看 到 ,这 
样 ,网 页 的 设计 不 能 完整 地 被 显示 出 来 ,人 迫使 浏览 者 使 用 鼠标 拖 动 滚动 条 ,增加 了 麻烦 。 
网 页 的 长 度 (高 度 ) 不 受 768 像素 的 限制 ,可 根据 内 容 的 需要 而 定 , 浏 览 者 可 上 下 拖 动 滚动 
条 查看 。 

另外 ,在 设计 时 ,要 注意 画面 的 图 像 文字 的 视觉 分 量 在 上 下 左右 方位 都 基本 平衡 ,但 
过 于 平衡 的 画面 难免 呆板 ,也 要 注意 视觉 上 的 互相 呼应 、 对 比 ,注重 元 素 政 密 搭配 。 在 色 
彩 搭配 上 ,多 使 用 同类 色 与 邻近 色 , 这 样 看 来 有 层次 感 又 和 谐 ,同时 也 要 适量 使 用 对 比 色 ， 
起 到 点 缀 丰富 的 作用 。 

如 图 9-30 所 示 为 一 幅 首 页 布局 设计 ,采用 了 期 刊 杂志 式 的 类 型 ,上 下 结构 ,色彩 运用 
丰富 充实 ,可 在 LOGO 的 位 置 运 用 一 个 具有 点 组 作用 的 亮点 。 


首页 ”电影 音乐 图 书 关于 站 长 


Welcome to my site... 


最 近 更 新 : 
2015.9.15 


2015.8.8 





图 9-30 首页 设计 效果 图 
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9.5.2 切片 导出 网 页 


基本 导航 及 页 面 结构 已 经 建立 好 之 后 ,就 到 了 增加 切片 的 时 候 。Fireworks 中 的 切 


片 是 输出 图 形 及 产生 交互 的 主要 参考 物件 ,导出 的 文档 将 根据 切片 来 将 图 形 切割 成 不 同 
的 部 分 ,并 在 浏览 器 中 通过 表格 组 装 到 一 起 。 同 时 ,所 有 的 交互 行为 也 是 通过 切片 之 间 的 
联系 来 产生 的 ,如 翻转 图 、 弹 出 菜单 等 。 





在 设计 页 面 时 ,如 果 已 经 建立 了 按钮 ,那么 按钮 本 身 已 经 带 有 了 自己 的 切片 ,因此 需要 对 


其 他 对 象 建立 各 自 的 切片 。 创 建 切片 通常 使 用 工具 面板 中 的 切片 工具 哆 直接 绘制 ,但 如 果 想 
创建 精确 大 小 的 切片 ,可 以 选择 对 象 并 执行 右键 菜单 中 的 “插入 切片 ”命令 ,自动 插入 切片 。 














增加 的 切片 默认 情况 下 是 绿色 的 半 透 明 对 象 ,它们 都 放置 在 “网 页 层 ” 上 ,如 图 9-31 


所 示 。 
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图 9-31 首页 草图 切片 效果 


切片 完成 后 ,选择 Fireworks 中 的 “2 幅 ? 窗 口 。 在 这 个 窗口 的 左 侧 ,是 可 编辑 的 原 


图 ,而 在 这 个 窗口 的 右 侧 , 则 是 优化 以 后 的 图 像 。 在 这 个 窗口 的 下 方 ,可 以 看 到 详细 的 关 


于 每 一 个 切片 的 文件 量 和 下 载 时间 等 信息 。 





在 Fireworks 的 “优化 ”面板 ,使 用 “指针 ”工具 ,在 "2 幅 ” 窗 口 的 左 侧 依次 选择 切片 ， 


然后 在 “优化 ”面板 中 进行 相应 的 优化 操作 ,最 终 优化 后 的 图 像 效果 可 以 在 "2 幅 " 窗 口 的 
右 侧 进行 观察 。 


对 每 一 张 切 片 进行 优化 后 ,就 可 以 导出 所 有 的 图 像素 材 了 。 选 择 “ 文 件 ”>“ 导 出 ” 命 
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令 ,会 弹出 Fireworks 的 “导出 ”对 话 框 ,如 图 9-32 所 示 。 

















图 9-32 “导出 ”对 话 框 


在 “导出 ”对 话 框 中 的 “保存 类 型 "下 拉 列 表 中 选择 "HTML 和 图 像 * 选 项 。 在 “文件 
名 ”文本 框 中 输入 希望 的 文件 名 称 ,建议 命名 规则 简单 易 记 。 在 “切片 "下拉 列 表 中 选择 
“导出 切片 ”, 选 中 "将 图 像 放 信子 文件 夹 "选项 ,习惯 上 会 把 所 有 切片 生成 的 图 像 保 存 到 站 
点 的 图 像 文 件 夹 内 。 

全 部 设置 完毕 后 , 单 击 "保存 ”按钮 ,将 在 站 点 目录 下 生成 一 个 网 页 和 对 应 的 图 像 文 
件 ,生成 的 图 像 如 图 9-33 所 示 。 
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9-33 ”导出 到 站 点 中 的 切片 
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所 有 的 切片 生成 以 后 ,就 可 以 使 用 这 些 导 出 的 网 页 和 图 像素 材 ,在 Dreamweaver 中 
进行 进一步 修饰 了 。 


9.5.3 ” Dreamweaver 后 期 修饰 


启动 Dreamweaver CC, 打开 刚才 导出 的 网 页 ,可 进入 该 页 的 编辑 状态 ,这 时 候 发 现 
整个 已 经 基本 完成 , 仅 需 一 些 后 期 编辑 。 

(1) 修改 网 页 标题 栏 。 导 出 后 的 网 页 标题 栏 是 文件 名 ,修改 适合 的 网 页 标题 。 

(2) 根据 需要 修改 网 页 的 对 齐 方式 ,如 果 内 容 宽度 小 于 显示 器 宽度 ,可 以 把 整个 页 五 
居中 。 

方法 一 : 修改 源 代 码 , 在 <<body 二 标签 后 添加 去 center 二 ,在 <</body 之 前 添加 
<</center>, 通 过 添加 <<center 之 标签 ,使 网 页 全 局 居中 。 

方法 二 : 修改 最 外 层 表格 二 table 二 的 对 齐 方式 ,将 “默认 ”修改 为 “居中 对 齐 ”。 

(3) 为 切片 添加 超 链接 。 如 上 例 中 的 导航 栏 * 首 页 ”"“ 电 影 ”" “音乐”"“ 图 书 ” 和 “关于 
站 长 ”都 已 单独 切片 ,为 独立 的 图 片 文件 ,可 以 直接 选中 对 应 图 片 ,添加 链接 。 

(4) 添加 更 多 内 容 。 在 Fireworks 中 的 设计 仅 为 布局 草图 ,有 更 多 的 文字 内 容 和 图 
片 内 容 需 要 在 网 页 编辑 状态 下 添加 ,但 切片 后 的 页 面 所 有 的 元 素 都 是 图 片 ,就 算 一 整 块 色 
块 ,也 是 用 图 片 保存 ,如 图 9-34 所 示 。 
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图 9-34 切片 都 以 图 片 方式 插入 网 页 





一 个 常用 的 操作 : 将 图 片 在 原来 的 单元 格 中 删除 ,然后 作为 单元 格 的 背景 图 重新 插 
人 表格 ,这 时 就 可 以 在 单元 格 内 添加 新 的 内 容 了 ,如 图 9-35 所 示 。 
需要 指出 的 是 ,最 终 输出 的 是 整个 页 面 ,在 Dreamweaver 中 可 编辑 的 部 分 只 有 一 小 
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图 9-35 ”将 切片 转换 成 单元 格 背 景 

















部 分 ,但 Fireworks 能 做 到 的 并 不 仅仅 是 这 样 , 具 体 到 实际 应 用 ,应 该 根据 具体 的 内 容 设 
计 版 面 ,而 且 尽 可 能 地 多 利用 Fireworks 的 局 部 输出 功能 ,将 一 个 页 面 分 成 多 个 部 分 输 
出 ,这 样 可 以 使 页 面具 有 更 大 的 灵活 性 和 可 操作 性 。 

例如 上 例 可 以 将 整个 页 面 分 为 上 下 两 部 分 单独 输出 ,上 部 的 导航 条 与 LOGO 作为 一 
部 分 输出 ,下 部 的 插图 与 更 新 信息 可 以 单独 作为 一 部 分 ,或 者 可 以 在 Dreamweaver 中 输 
入 单独 的 文字 。 最 后 将 这 些 单独 输出 的 部 分 在 Dreamweaver 中 利用 表格 组 装 起 来 ,这 样 
可 以 最 大 限度 地 保持 页 面 的 适应 性 和 灵活 性 。 此 外 还 可 以 将 一 些 可 以 作为 背景 图 片 使 用 
的 内 容 以 图 片 输出 ,如 页 面 主要 部 分 的 直线 纹理 可 以 单独 输出 为 一 个 背景 图 片 ,并 在 
Dreamweaver 中 定义 为 单元 格 的 背景 。 


本 章 实 训 


【 实 训 1] 

熟练 完成 各 种 位 图 操作 ,包括 改变 图 片 大 小 、 抠 图 等 。 

【 实 训 2】 

设计 一 个 468pxX 90px 的 横幅 静态 广告 ,挑选 合适 图 片 作为 背景 ,并 在 
各 种 样式 的 文字 ,可 以 制作 环绕 文字 或 特效 文字 。 

【 实 训 3】 

为 个 人 站 点 分 别 设计 书籍 封面 式 和 期 刊 杂 志 式 的 首页 ,然后 分 别 导出 为 HTML 网 
,并 在 Dreamweaver 中 进一步 修饰 。 
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10.1 使 用 表单 





10.1.1 什么 是 表单 


常 竹 网 站 的 用 户 , 对 于 表单 的 使 用 一 定 不 陌生 。 


在 网 页 之 中 常会 有 许多 数据 的 栏 位 ， 


最 后 只 要 单 击 “ 提 交 ” 按 钮 即 可 将 用 户 所 填写 的 数据 提交 给 程序 处 理 , 这 个 输入 数据 的 地 


方 即 是 表单 。 在 网 页 中 互动 的 设计 中 ,表单 的 制作 
是 一 个 相当 重要 的 操作 ,一 个 不 良 的 表单 设计 , 往 
往 会 造成 程序 的 错误 或 是 数据 的 遗失 。 

表单 是 用 于 实现 浏览 者 与 网 页 制作 者 之 间 信 
息 交 互 的 一 种 网 页 对 象 ,在 Internet 中 表单 被 广泛 
应 用 于 各 种 信息 的 搜集 与 反馈 。 例 如 ,如 图 10-1 所 
示 网 页 (部 分 ) 中 就 嵌入 了 一 个 用 进行 电子 邮件 系 
统 登录 的 表单 ,其 中 包括 一 个 用 于 输入 用 户 名 的 文 
本 框 一 个 用 于 输入 密码 的 文本 框 和 一 个 用 于 提交 表 


10.1.2 表单 的 使 用 方法 


1. 创建 表单 
创建 表单 的 基本 步骤 如 下 : 





忘记 密码 


图 10-1 “ 豆 因 ”网 站 用 户 登录 界面 


单 的 “登录 ”按钮 。 


(1) 确定 需要 收集 的 信息 ,根据 信息 特点 设计 表单 。 


(2) 在 表单 中 插入 不 同 的 表单 控件 元 素 。 
(3) 设置 表单 域 的 属性 。 
(4) 设置 通过 表单 所 收集 的 信息 的 处 理 方式 。 


(5) 设置 确认 网 页 ,确认 已 经 接收 到 用 户 填写 的 信息 ,并 请 用 户 核对 是 否 正确 。 


表单 只 是 收集 浏览 者 输入 的 信息 ,其 数据 的 接收 、 


传递 .处 理 以 及 反馈 工作 是 由 通用 


网 关 接口 (Common Gateway Interface) 的 CGI 程序 来 完成 的 。 如 果 要 在 网 页 中 添加 表 


单 ,就 必须 编写 相应 的 CGI 程序 。 
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2. 添加 表单 控件 
在 Dreamweaver CC 中 要 插入 表单 ,必须 要 应 用 到 “插入 ”面板 的 “表单 ” 栏 ,如 图 10-2 
所 示 , 创 建 如 图 10-3 所 示 注 册 表 单 .其 中 主要 控件 的 使 用 方法 如 下 。 





图 10-3 注册 表单 实例 
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常用 的 表单 控件 如 下 : 

(1) 力 ( 表 单 ); 会 在 文件 中 插入 一 个 以 红色 虚线 所 建立 的 表单 范围 , 当 单 击 “提交 ” 
按钮 时 ,会 将 该 区 域内 同一 个 组 的 数据 全 部 提交 ,如 图 10-3 所 示 的 红色 虚线 框 , 括 起 了 整 
个 表单 。 一 个 表单 对 应 一 个 红 框 。 

(2) 加 (文本 ) : 可 以 接收 任何 类 型 的 中 、 英 文 项 目 。 输 入 的 文字 可 以 显示 为 单行 、 
多 行 或 密码 (输入 的 内 容 在 文本 框 内 显示 * 号 )。 如 图 10-3 所 示 ,“ 用 户 名 ”“ 来 自 ” 等 控 
件 使 用 了 文本 字段 。 

(3) 图 (隐藏 域 ) : 如 果 该 域 所 保持 的 参考 值 或 系统 值 数 据 不 想 被 用 户 修改 与 预览 
时 ,就 必须 将 该 域 在 浏览 者 的 页 面 上 隐藏 起 来 ,只 保留 给 管理 员 看 。 如 图 10-3 所 示 的 
E-mail 控件 后 的 贺 图 标 ,只 在 网 页 编辑 状态 可 见 ,预览 时 隐藏 起 来 。 

(4) 回 (文本 区 域 ): 可 以 输入 多 行文 字 的 字段 。 如 图 10-3 所 示 的 “自我 介绍 区域。 

(5) 回 ( 复 选 框 ) : 可 以 允许 在 单一 选项 组 中 复 选 ,用 户 可 以 选取 能 套用 的 所 有 选项 
(例如 选择 “兴趣 “专长 ”时 使 用 ) 。 如 图 10-3 所 示 的 “爱好 ”选项 。 

(6) 圈 ( 单 选 按钮 ): 若 采用 了 统一 的 名 称 , 则 代表 独占 式 的 选项 ,也 就 是 只 能 单 选 ， 
在 组 内 选取 某 个 按钮 会 取消 选取 组 中 所 有 其 他 的 选项 。 例 如 ,用 户 可 以 选取 “是 ”“ 否 ”或 
是 “ 男 *“ 女 ”。 如 图 10-3 所 示 的 “性 别 "选项 。 

(7) 图 ( 单 选 按钮 组 ) : 会 插入 一 个 选项 按钮 集合 ,这 些 按钮 公用 相同 的 名 称 ,当然 只 
能 单 选 。 格 式 可 以 是 “ 断 行 符号 ”( 即 一 行 一 个 选项 ) ,也 可 以 是 “表格 的 形式 。 

(8) 图 (列表 /菜单 ) : 可 以 在 列表 中 建立 用 户 选项 ,以 下 拉 菜单 的 形式 显示 出 弹出 式 
菜单 ,只 允许 用 户 选取 单一 选项 。 如 图 10-3 所 示 的 “安全 提问 ”控件 。 

(9) 图 (图 像 域 ); 可 以 在 表单 中 插入 图 像 域 ,可 以 用 来 取代 “提交 ”按钮 ,做 成 图 形式 
按钮 ,但 是 ,无 法 做 成 “ 重 置 "按钮 。 

(10) 国 ( 文 件 域 ): 会 在 文件 中 插入 空白 的 文本 域 和 “浏览 ”按钮 。 文 件 域 让 用 户 可 
以 浏览 找到 他 们 硬盘 上 的 文件 ,并 将 文件 视 为 表单 数据 上 传 。 如 图 10-3 所 示 的 "头像 ” 
控件 。 

(11) 国 ( 提 交 按 钮 ) : 会 在 表单 内 插入 文字 按钮 ,按钮 会 在 被 单 击 时 执行 工作 。“ 提 
交 ” 按 钮 被 单 击 后 ,会 将 表单 输入 的 内 容 提 交 给 后 台 程 序 ,如 图 10-3 所 示 的 “注册 ”。 

(12) 因 ( 重 置 按钮 ): 会 在 表单 内 插入 文字 按钮 ,按钮 会 在 被 单 击 时 执行 工作 。“ 重 
置 ?按钮 被 单 击 后 ,会 将 表单 输入 的 内 容 还 原 为 默认 值 , 如 图 10-3 所 示 的 “ 重 填 ”。 


10.1.3 表单 对 象 的 属性 设置 


Dreamweaver 表单 对 象 包括 文本 域 ,按钮 .图 像 域 , 复 选 框 . 单 选 按钮 列表 /菜单 文 
件 域 以 及 隐藏 域 等 。 

1.“ 表 单 控 件 

在 添加 表单 之 后 ,文档 中 将 以 红色 虚线 表示 表单 区 域 。 表 单 对 象 只 能 插入 在 红色 虚 
线 内 。 为 了 更 合理 地 安排 表单 元 素 , 可 以 使 用 表格 来 布局 表单 元 素 。 

了 提示: 插入 表格 之 后 ,所 有 的 表单 元 素 都 可 以 放置 在 表格 中 。 
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表单 的 属性 可 以 通过 “属性 ”面板 进行 设置 ,如 图 10-4 所 示 。 
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图 10-4 “表单 "控件 属性 面板 


表单 属性 如 下 所 示 。 

ID; 为 表单 设置 一 个 名 称 。 表 单 命名 之 后 就 可 以 用 脚本 语言 对 它 进行 控制 。 

Action( 动 作 ): 识别 处 理 表单 信息 的 服务 器 端 应 用 程序 。 

Method( 方 法 ), 定义 表单 数据 处 理 的 方式 ， 

。Gets 追加 表单 值 到 URL 并 发 送 服务 器 GET 请 求 。 

。 Post: 在 消息 正文 中 发 送 表单 值 并 发 送 服务 器 POST 请 求 。 

Enctype: 指定 对 提交 给 服务 器 进行 处 理 的 数据 使 用 MIME 编码 类 型。 

在 插入 表单 之 后 ,需要 在 表单 (红色 虚线 内 ) 添 加 表单 元 素 ,例如 文本 域 , 单 选 按钮 、 复 
选 框 以 及 强 出 菜单 等 。 

利用 "插入 ”面板 的 “表单 " 栏 可 以 方便 地 插入 表单 中 的 各 个 元 素 。 

2.“ 文 本 字段 "控件 

“文本 字段 "是 常见 表单 元 素 之 一 ,在 文本 域内 可 输入 任何 文本 、 字 母 或 数字 类 型 。 输 
入 的 文本 可 以 显示 为 单行 ,多 行 \ 项 目 符号 或 星 号 (多 用 于 密码 保护 ) 。 

要 播 入 文本 域 ,将 光标 定位 后 , 单 击 * 插 入 "工具 栏 * 表 单 " 分 类 上 的 “文本 字段 "按钮 
即 可 。 

“文本 字段 * 的 属性 可 以 通过 * 属 性 "面板 进行 设置 ,如 图 10-5 所 示 。 
i 





10-5 “文本 字段 "属性 面板 


。 设置 “属性 ”面板 中 size 的 值 ,可 以 限定 文本 域 显 示 的 宽度 。 

。 设置 Max Length 的 值 ,可 以 限制 用 户 输入 的 字数 。 

。 设置 Value 值 ,可 以 用 于 文本 域 中 的 “初始 值 ”, 即 浏览 者 尚未 输入 文本 、 字 母 或 数 

字 之 前 所 显示 的 提示 值 。 

3.“ 单 选 按钮 "控件 

单 选 按钮 是 只 可 以 取 其 一 的 按钮 。 在 一 组 按钮 内 只 能 选取 一 个 按钮 。 

要 插入 单 选 按钮 ,将 光标 定位 后 , 单 击 * 插 入 ”工具 栏 “ 表 单 ” 分 类 上 的 “ 单 选 按钮 
按钮 。 

“ 单 选 按钮 "的 属性 可 以 通过 “属性 ”面板 进行 设置 ,如 图 10-6 所 示 。 
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图 10-6 “ 单 选 按钮 "属性 面板 


设置 单 选 按钮 的 属性 ,可 以 在 选取 单 选 按钮 之 后 ,在 “属性 ”面板 中 的 “ 单 选 按钮 "下 的 
文本 域 中 输入 组 名 。 

要 设置 单 选 按钮 的 初始 状态 ,可 选取 “已 色 选 "或 “未 勾 选 ”。 

4.“ 复 选 框 "控件 

复 选 框 就 是 在 一 组 选项 中 允许 选取 多 个 选项 。 

要 插入 复 选 框 ,将 光标 定位 后 , 单 击 “ 插 入 ”工具 栏 “表单 ”分 类 上 的 “ 复 选 框 " 按 钮 。 

“ 复 选 框 "的 属性 可 以 通过 “属性 ”面板 进行 设置 ,如 图 10-7 所 示 。 





图 10-7 “ 复 选 框 " 属 性 面板 


设置 复 选 框 的 属性 ,可 以 在 选中 复 选 框 之 后 ,在 “ 复 选 框 名 称 ” 下 面 的 文本 域 中 输入 复 
选 框 的 名 称 。 注 意 , 复 选 框 的 名 称 不 能 相同 ,这 一 点 和 单 选 按钮 刚好 相反 。 

要 设置 复 选 框 的 初始 状态 ,可 选取 “已 勾 选 ”或 “未 勾 选 ”。 

5.“ 选 择 ” 控 件 

弹出 (下 拉 ) 菜 单 和 列表 都 列 出 了 一 组 用 户 可 以 从 中 选择 的 值 。 

弹出 菜单 和 列表 对 象 是 有 一 些 区 别 的 。 弹 出 菜单 只 允许 单项 选择 ,而 列表 框 则 可 选 
取 多 项 。 

要 插入 列表 /菜单 ,将 光标 定位 后 , 单 击 “ 插 入 "工具 栏 “表单 ”分 类 上 的 “列表 /菜单 ”。 

“列表 ”的 属性 可 以 通过 “属性 ”面板 进行 设置 ,如 图 10-8 所 示 。 





10-8 “列表 ”属性 面板 


设置 列表 /菜单 的 属性 ,可 以 在 选中 列表 /菜单 之 后 ,在 “列表 /菜单 "下 面 的 文本 域 中 
输入 列表 /菜单 的 名 称 。 

要 设置 列表 /菜单 项 的 内 容 , 可 以 通过 单 击 * 列 表 值 ?按钮 添加 列表 /菜单 的 项 目 。 

单 击 * 列 表 值 "按钮 [EBE jl, 如 图 10-9 所 示 。 
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图 10-9 修改 “列表 值 ” 


6.“ 按 钮 "控件 

按钮 可 以 执行 提交 或 重 置 表单 的 标准 任务 ,也 可 以 执行 自 定义 功能 。 在 插入 时 可 以 
设置 自 定义 按钮 标签 或 使 用 预先 定义 的 标签 。 

要 插入 表单 按钮 ,将 光标 定位 后 , 单 击 * 插 入 "工具 栏 "表单 分 类 上 的 “按钮 。 

“按钮 ”的 属性 可 以 通过 “属性 ”面板 进行 设置 ,如 图 10-10 所 示 。 





图 10-10 “按钮 属性 面板 


要 设置 按钮 的 属性 ,可 以 在 选中 按钮 之 后 ,在 “按钮 下面 的 文本 域 中 输入 按钮 的 
名 称 。 

后 提示 : 通过 “属性 "面板 可 以 设置 不 同 的 按钮 动作 和 按钮 的 标签 ,分 为 “提交 表单 ” 
或 “ 重 设 表单 ”。 


10.1.4 表单 应 用 实例 


【实例 10-1】 制作 一 个 如 图 10-3 所 示 的 个 人 资料 注册 表单 。 
(1) 在 “表单 "工具 栏 中 , 单 击 表单 按钮 增 , 将 出 现 如 图 10-11 所 示 的 选项 面板 ,选择 
“之 前 ”, 则 会 在 文本 插入 点 处 多 了 一 个 红色 虚线 构成 的 区 域 ,如 图 10-12 所 示 。 


图 10-11 表单 空间 插入 前 的 结构 选择 面板 





10-12 插入 表单 控件 
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(2) 将 鼠标 停留 在 表单 红色 虚线 区 域 ,在 “插入 ” 栏 中 ,选择 “常用 ”面板 的 “表格 "项 ， 
根据 预先 设 定 的 注册 项 目 ,规划 显示 表格 ,在 弹出 的 插入 表格 对 话 框 中 设置 行 数 为 17, 列 
数 为 2, 实 现 如 图 10-13 所 示 的 表格 结构 ,并 在 单元 格 内 输入 如 下 所 示 的 文字 。 





图 10-13 表格 结构 


(3) 将 鼠标 停留 在 “用 户 名 ”右边 的 单元 格 内 ,在 “插入 "面板 的 “表单 " 栏 中 选择 “ 文 
本 ”按钮 ,用 同样 方法 添加 “密码 ”“ 确 认 密 码 ” 及 “电子 邮件 ”控件 ,如 图 10-14 所 示 。 

















ED* [LLLLL) 
确认 密码 * LL TLL) 
了 -mail 二 [zhangsan@163. con 








图 10-14 输入 文本 字段 


(4) 将 鼠标 停留 在 “安全 提问 "右边 的 单元 格 ,在 “插入 "面板 的 "表单" 栏 中 单 击 “ 选 择 ” 
按钮 , 单 击 属性 面板 的 列表 值 按钮 IE ,为 该 列表 添加 列表 值 ,如 图 10-15 所 示 。 将 
鼠标 停留 在 “回答 ”右边 的 单元 格 内 ,在 "表单 "面板 中 单 击 "文本 字段 "按钮 ,插入 文本 框 。 


[ 安全 提问 车 | 








图 10-15 插入 列表 框 


(5) 将 鼠标 停留 在 “性 别 ?右边 的 单元 格 ,在 “表单 ”面板 中 单 击 三 次 * 单 选 按钮 按钮， 
并 在 按钮 间 相应 位 置 上 输入 * 男 ”“ 女 ”和 "保密 ”, 将 “保密 ”所 对 应 单 选 按钮 的 初始 状态 修 
改 为 “已 勾 选 ”, 如 图 10-16 所 示 。 





| 





图 10-16 插入 单 选 按钮 


199 


180 


网 站 建设 与 网 页 设计 项 目 化 教程 


(6) 将 鼠标 停留 在 “生日 "右边 的 单元 格 内 ,在 “表单 ”面板 中 单 击 “ 日 期 ”按钮 ,插入 日 
期 控件 ,提示 用 户 输入 日 期 格式 。 

(7) 将 鼠标 停留 在 “头像 右边 的 单元 格 , 在 “表单 ”面板 中 单 击 "文件 ”按钮 。 

(8) 将 鼠标 停留 在 “爱好 ”右边 的 单元 格 ,在 “表单 ”面板 中 单 击 4 次" 复 选 框 按 钮 。 
并 在 相应 位 置 输入 如 图 10-17 所 示 的 文字 。 


肥 好 同 动 Cs OF 口 ] sl | 


图 10-17 插入 复 选 框 



































(9) 将 鼠标 停留 在 “自我 介绍 "右边 的 单元 格 ,在 “表单 ”面板 中 单 击 "文本 区 域 ” 按 钮 。 

(10) 将 鼠标 停留 在 表格 的 最 后 一 行 表格 右 侧 , 在 “表单 ”面板 中 分 别 单 击 "提交 ”按钮 
和 “ 重 园 按钮。 选择 这 一 行 的 两 个 单元 格 ,并 在 “修改 ”菜单 中 ,选择 “表格 ”>“ 合 并 单元 
格 ”, 如 图 10-18 所 示 。 








图 10-18 插入 按钮 


(11) 为 表格 添加 标题 ,调整 单元 格 的 高 度 和 宽度 ,并 设置 单元 格 内 字体 的 对 齐 方 式 ， 
完善 页 面 排版 ,达到 美观 。 

【实例 10-2】 将 表单 中 的 内 容 通过 E-mail 传送 到 指定 的 邮箱 。 

按 实 例 10-1 的 方法 ,设计 一 个 如 图 10-19 所 示 的 表单 ,表单 内 的 信息 输入 完毕 后 , 需 
要 将 该 信息 提供 给 有 关 的 人 员 , 通 过 电子 邮件 接收 表单 结果 。 在 单 击 “ 提 交 ” 按 钮 时 ,网 页 
会 将 所 有 的 表单 组 件 信息 送 到 指定 邮箱 。 





























图 10-19 留言 表单 


实现 的 步骤 如 下 : 
(1) 为 了 标识 用 户 的 留言 信息 ,需要 为 每 个 表单 控件 命名 。 单 击 “ 标 题 " 右 侧 单 元 格 
中 的 文本 框 ,在 属性 面板 的 “文本 域 ” 中 输入 名 称 “标题 ,同样 的 操作 应 用 于 “姓名 ”“ 电 子 
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邮件 ”及 “留言 内 容 ” 右 侧 的 文本 输入 框 , 单 击 “ 性 别 ” 对 应 的 单 选 按钮 ,在 属性 面板 的 “ 单 选 
按钮 ”中 输入 名 称 “ 性 别 ”, 分 别 设置 选 定 值 。 

注意 : 一 般 情况 下 ,控件 名 称 尽量 命名 为 英文 ,这 里 为 了 使 发 送 的 邮件 内 容 清楚 分 
类 , 故 命名 为 中 文 。 

(2) 在 “设计 ?视图 下 ,将 鼠标 停留 在 表单 外 围 红色 虚线 框 上 ,选中 红色 虚线 框 , 即 选 
中 整个 表单 ,并 为 表单 命名 为 “留言 ”。 

(3) 在 “属性 ”面板 中 的 “动作 ” 栏 中 输入 格式 “mailto: 指定 的 邮箱 地 址 ”, 例 如， 
mailto: admin@zdxy. cn, 设 定 “ 方 法 ”为 POST, 在 “MIME 类 型 " 栏 输入 “text/plain”, 如 
图 10-20 所 示 。 


Ee 





| EO NE 
图 10-20 将 表 通 过 E-mail 传送 到 邮箱 


(4) 完成 整个 表单 的 行为 ,选择 “文件 >“ 保存 ”命令 来 将 作品 保存 ,再 开始 预览 。 

(5) 在 预览 页 面 中 ,将 表单 的 内 容 一 一 填 信 ,最 后 单 击 “提交 ”按钮 。 在 浏览 器 弹出 的 如 
图 10-21 所 示 的 对 话 框 中 单 击 "确定 ”按钮 ,表示 在 不 加 密 的 情况 下 发 送 表 单 信息 ,信息 会 按 
纯 文 本 格式 传送 到 系统 预先 安装 电子 邮箱 客户 端 中 。 发 送 后 ,可 以 到 指定 的 收 件 箱 内 来 查 
看 邮件 信息 。 该 功能 需要 网 络 支持 ,确保 单 击 "提交 ”按钮 时 ,正常 连接 在 Internet 上 。 





图 10-21 到 指定 的 收 件 箱 内 来 查看 邮件 信息 


10.2 使 用 行为 





一 般 情况 下 ,在 网 页 中 如 果 要 加 入 动态 效果 或 交互 功能 , 则 需要 在 网 页 中 加 入 脚本 程 
序 , 如 使 用 客户 端 JavaScript 代码 ,就 需要 用 户 不 仅 熟悉 网 页 的 制作 还 要 精通 JavaScript 
代码 的 编写 。 在 Dreamweaver CC 中 .用户 可 以 使 用 行为 来 设计 网 页 的 动态 效果 和 交互 
功能 。 使 用 Dreamweaver CC 设计 网 页 ,不 需要 手动 编写 JavaScript 代码 ,程序 会 自动 生 
成 。 因 此 ,不 懂得 代码 编写 ,也 可 以 顺利 完成 动态 效果 的 制作 。 
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10.2.1 什么 是 行为 


行为 是 在 某 一 对 象 上 因为 某 一 事件 而 触发 某 一 动作 的 综合 描述 。 它 是 被 用 来 动态 响 
应 用 户 操作 ,改变 当前 页 面 效果 或 是 执行 特定 任务 的 一 种 方法 。 

行为 是 由 事件 .对象 和 动作 构成 的 。 事 件 是 浏览 器 生成 的 消息 ,是 一 个 动作 具体 执行 
的 时 机 或 条 件 , 是 在 特定 的 时 间或 用 户 在 某 时 所 发 出 的 指令 后 紧 接着 发 生 的 。 例 如 ,鼠标 
移动 到 按钮 图 像 上 ,产生 了 图 像 对 象 的 事件 ,该 事件 触发 了 动作 ,显示 了 一 个 下 拉 菜 单 。 
这 些 要 素 加 在 一 起 ,就 构成 了 “行为 ”。 行为 是 由 预先 书写 好 的 JavaScript 代码 构成 的 ,使 
用 它 可 以 完成 诸如 打开 新 浏览 窗口 .播放 背景 音乐 ,控制 Shockwave 文件 的 播放 等 任务 。 

事件 是 为 大 多 数 浏览 器 理解 的 通用 代码 ,例如 onmouseover、onmouseout 和 onclick 
都 是 用 户 在 浏览 器 中 对 浏览 页 面 的 操作 ,而 浏览 器 通过 一 定 的 释 译 ,响应 用 户 的 动作 。 

Dreamweaver 包含 了 百 余 个 事件 ,行动 ,同时 也 提供 了 扩展 行为 的 功能 ,可 以 通过 下 
载 第 三 方 的 行为 ,从 而 扩展 其 行为 的 种 类 。 如 果 擅 长 javaScript 语言 ,也 可 以 自己 书写 行 
为 。 但 要 注意 附加 行为 时 的 对 象 必须 是 那些 可 以 接受 事件 和 动作 的 对 象 。 此 外 ,行为 的 
使 用 很 大 程度 上 取决 于 浏览 器 的 版 本 。 版 本 越 高 ,其 能 接收 的 事件 数组 也 越 多 。 


10.2.2 行为 的 基本 操作 


要 使 用 Dreamweaver 自 带 行为 创建 特殊 网 页 效果 ,其 附加 行为 的 方法 非常 相似 。 操 
作 方法 如 下 : 

(1) 选取 文档 中 的 某 个 对 象 ,选取 对 象 。 

(2) 选择 "窗口 ”一 “行为 ”命令 ,打开 "行为 面板 , 选 定 对 象 的 HTML 标签 将 出 现在 标题 
栏 中 。 如 果 步 骤 (1) 中 选 定 的 是 图 片 , 则 行为 面板 标题 栏 中 的 标签 为 img, 如 图 10-22 所 示 。 


二 进入 网 站 








目 目 丽 40x5lv 


[~ 14k Sre inases/enterl st | 回国 sss 天 
nm _ 拉 接口 
0 目标 中 


DoY 原 抬 
































图 10-22 选取 对 象 


第 10 章 动态 网 页 


(3) 单 击 “ 十 ”按钮 并 从 动作 弹出 菜单 中 选择 一 个 动作 。 例 如 ,制作 交换 图 像 效 果 , 则 
单 击 “ 交 换 图 像 ”, 如 图 10-23 所 示 。 














图 10-23 ”选择 “交换 图 像 "行为 


(4) 选中 有 效 动作 菜单 之 后 ,将 出 现 和 所 选择 的 动作 相应 的 对 话 框 ,显示 该 动作 的 参 
数 设 置 选项 。 在 本 例 中 则 需要 指定 交换 图 像 的 图 片 路 径 ,如 图 10-24 所 示 。 




















设 定 原始 档 为 :inages/enter2, gif 
预先 副 入 图像 
息 标 江 开 时 亿 复 图 多 











图 10-24 “交换 图 像 ”行为 设置 面板 


(5) 单 击 “ 确 定 "按钮 关闭 对 话 框 。 

(6) 动作 的 默认 事件 将 出 现在 “事件 ” 列 中 。 如 果 
该 事件 不 符合 需要 , 则 可 以 从 “事件 ”弹出 菜单 中 选择 
其 他 事件 ,如 图 10-25 所 示 。 

事件 的 出 现 取决 于 所 选择 的 对 象 和 在 “显示 事件 ” 
弹出 菜单 中 指定 的 浏览 器 。 如 果 所 需要 的 事件 没有 出 图 10-25 设 定 行为 
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现 , 则 应 确认 是 否 选中 了 正确 的 对 象 ,或 改变 “显示 事件 ”弹出 菜单 中 的 目标 浏览 器 斌 
一 试 。 


10.2.3 行为 查看 器 


Dreamweaver 提供 了 一 些 自 带 的 行为 ,利用 "行为 "查看 器 ,就 能 够 制作 出 很 多 常见 
的 页 面 动 态 交互 式 效果 ,以 下 介绍 最 实用 的 几 种 。 

1. 实现 弹出 信息 

“弹出 信息 ”动作 的 功能 是 当 用 户 执行 操作 (如 选 定 图 像 ) 时 显示 指定 的 信息 。 弹 出 信 
息 动作 可 向 访问 者 发 送 简洁 的 弹出 式 菜单 。 例 如 ,如 果 将 弹出 消息 动作 附加 到 某 个 链接 
并 指定 它 将 由 onMouseOver 或 onClick 事件 触发 ,那么 只 要 某 人 在 浏览 器 中 用 鼠标 指针 
指向 或 单 击 该 链接 ,就 将 在 对 话 框 中 弹出 指定 的 消息 。 下 面 来 看 看 弹出 信息 动作 的 应 用 
操作 步骤 。 

【实例 10-3】 设置 一 个 超 链接 单 击 显示 欢迎 消息 框 。 

(1) 打开 网 站 主页 ,制作 一 个 指向 空 链接 (链接 地 址 为 # ) 的 超 链接 文字 ,选中 这 个 超 
链接 文字 , 右 侧 “ 行 为 查看 器 "标题 切换 为 “标签 <a 之 ”( 注 意 , 可 以 根据 需要 ,在 标签 选择 
器 中 选择 要 触发 动作 的 对 象 标签 ,这 里 选择 <a 二 标签 )。 

(2) 在 “行为 "面板 中 单 击 “ 十 ”按钮 ,在 弹出 的 菜单 中 ,选择 “弹出 信息 ”命令 ,如 
图 10-26 所 示 , 为 超 链接 对 象 添加 动作 ,得 到 “弹出 信息 ”对 话 框 。 

















图 10-26 选择 “弹出 信息 ”命令 


(3) 在 “弹出 信息 ”对 话 框 中 ,在 “消息 ”文本 框 内 输入 要 弹出 的 信息 ,如 输入 “欢迎 光 
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临 本 站 !”, 如 图 10-27 所 示 。 单 击 “确定 ”按钮 。 











图 10-27 “弹出 信息 ”对 话 框 


(4) 保存 网 页 , 当 浏 览 网 页 时 , 单 击 超 链接 , 则 弹出 一 个 对 话 框 ,其 中 显示 的 文字 如 上 
输入 的 消息 ,如 图 10-28 所 示 。 





图 10-28 单 击 超 链 接 弹 出 对 话 框 


2. 设置 状态 栏 文本 

在 窗 体 的 状态 栏 上 放置 一 些 文本 用 来 显示 本 地 或 者 远程 的 一 些 有 用 信息 是 非常 简单 
高 效 的 。 

【实例 10-4】 设置 一 个 网 站 主页 状态 栏 的 欢迎 消息 。 

(1) 打开 网 站 主页 ,选择 <body 之 标签 (注意 ,可 以 根据 需要 ,在 标签 选择 器 中 选择 要 
触发 动作 的 对 象 标 签 , 这 里 选择 <<body>> 标 签 ) 。 

(2) 在 “行为 ”面板 中 单 击 “ 十 ”按钮 ,在 弹出 的 菜单 中 ,选择 “设置 文本 ”一 “设置 状态 
栏 文本 ”命令 ,如 图 10-29 所 示 , 为 网 页 添加 动作 ,得 到 “设置 状态 栏 文本 ”对 话 框 。 

(3) 在 “设置 状态 栏 文本 ”对 话 框 中 ,在 “消息 ”文本 框 内 输入 要 弹出 的 信息 ,如 输入 
“欢迎 光临 本 站 !”。 单 击 “ 确 定 ” 按 钮 。 

同时 ,该 对 话 框 也 提示 可 能 的 兼容 性 问题 ,如 图 10-30 所 示 。 

(4) 保存 网 页 ,预览 效果 ,车 浏览 器 设置 为 显示 “状态 栏 ”, 则 会 在 浏览 器 下 方 状态 栏 
将 显示 欢迎 信息 ,如 图 10-31 所 示 。 
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消息 到 邓 天 本 下 站 1 


注 章 并 暮 所 有 浏览 器 都 支持 更 改 状 态 栏 文本 ， 划 些 浏览 
二 全 根据 用 户 首 选 参数 来 确定 是 否 允 许 此 功能 。 





图 10-30 “设置 状态 栏 文本 ”对 话 框 


Om -ox]Sesmmmse "rs 
学 击 这 个 链接 斌 斌 "| 
| 





10-31 状态 栏 消息 
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本 章 实 训 


【 实 训 1] 
自行 设计 一 个 注册 表单 ,其 中 需 用 到 各 种 表单 控件 ,并 利用 CSS 对 这 个 表单 进行 美 
化 ,效果 参考 图 10-32 。 


















































几 个 有 关 Web 标 准 的 问题 
帮助 我 们 更 好 地 了 解 您 对 Web 标 准 网 页 设计 的 想法 与 看 法 
如 是 否 名 使 用 表格 式 布局 ? 是 口 否 O 
如 是 否 开始 使 用 css 布局 ? 是 CO 要 人 
是 天 订阅 cssi@ 伞 ? 口 葬 
区 所 从 事 的 行业 FS 国 
请 外 下 才 的 姓名 
请 下 您 的 zail 地 直 : 
请 全 下 作 的 建议 : 
属 王 滞 | 





图 10-32 表单 制作 效果 参考 图 


【 实 训 2】 
为 实 训 1 完成 的 表单 页 面 添加 “状态 栏 文字 ”, 并 尝试 添加 “检查 表单 ”行为 来 验证 用 
户 的 输入 。 
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11.1 站 点 规划 





随 着 网 络 科技 的 发 展 ,Internet 已 经 成 为 企业 或 个 人 宣传 自己 的 重要 途径 之 一 。 拥 
有 一 个 好 的 网 站 就 是 企业 或 个 人 最 好 的 名 片 。 建 立 个 人 网 站 可 以 让 浏览 者 了 解 站 长 , 提 
供 个 人 展示 的 机 会 , 交 到 更 多 志同道合 的 网 友 ;建立 企业 网 站 也 能 提高 企业 的 知名 度 , 突 
破 时 空 的 限制 ,在 网 络 时 代 创造 更 多 的 商机 。 

在 本 章 中 ,将 详细 介绍 一 个 个 人 网 站 的 建设 过 程 。 


11.1.1 内 容 规 划 


由 于 网 络 上 各 种 各 样 的 信息 很 多 ,别人 可 以 轻易 地 从 各 大 知名 网 站 上 了 解 自己 想 要 
的 信息 。 所 以 ,这 个 综合 实例 关注 的 便 是 怎样 让 自己 的 网 站 更 具有 个 性 魅力 ,使 个 人 擅长 
的 信息 更 全 面 地 反映 给 浏览 者 。 以 上 便 是 个 人 站 点 主题 选择 的 指导 思想 。 

站 点 的 主体 内 容 由 个 人 日 常 收藏 与 爱好 组 成 ,从 电影 .音乐 和 图 书 三 大 方面 全 方位 展 
示 个 人 丰富 多 彩 的 生活 。 在 主要 内 容 之 外 ,还 设 有 与 站 长 交流 的 模块 。 

目标 与 典型 用 户 : 本 网 站 以 个 人 娱乐 收藏 方面 的 信息 为 主要 内 容 , 希 望 能 够 传播 与 
交流 相应 内 容 , 目 标 用 户 定义 为 有 相同 兴趣 的 上 网 用 户 。 

网 络 技术 约定 如 下 。 

(1) Windows 系列 操作 系统 。 

(2) 使 用 调制 解 调 器 或 宽带 方式 上 网 (最 低 网 络 传输 速率 为 56 kb/s)。 

(3) 使 用 IE8 或 以 上 版 本 的 浏览 器 ,分 辩 率 为 1024 像素 X768 像素 以 上 。 

(4) 运用 的 技术 有 Div 十 CSS 布局 .CSS 美化 页 面 .Flash 动画 等 。 

网 站 内 容 与 风格 : 站 点 包括 以 下 栏目 。 

(1) 首页 : 站 点 进入 页 面 , 栏 目 综合 介绍 。 

(2) 电影 : 四 部 热门 电影 。 

(3) 音乐 : 四 张 热门 CD。 

(4) 图 书 : 四 本 热门 书籍 。 

(5) 相册 : 站 长 收藏 的 各 种 海报 美 图 欣赏 。 

(6) 联系 站 长 : 与 站 长 交流 。 
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在 设计 风格 方面 ,尽量 采用 “画廊 式 ”, 力 求 能 够 表现 出 各 栏目 的 最 大 特色 ,达到 有 效 
传达 信息 的 目的 。 网 站 所 有 页 面 均 采 用 灰色 与 红色 的 配色 方案 ,展现 网 站 活跃 的 气氛 。 
网 站 主页 采用 静 、 动 相 结 合 的 方式 , 即 静 态 的 图 片 和 动态 的 Flash 相 结 合 。 

网 站 的 链接 结构 是 指 页 面 之 间 相 互 链接 的 拓扑 结构 。 如 果 把 每 个 页 面 比喻 成 一 个 固 
定点 ,那么 链接 就 是 两 个 固定 点 之 间 的 连 线 。 一 个 点 可 以 和 一 个 点 连接 ,也 可 以 和 多 个 点 
连接 。 

本 网 站 采用 的 是 最 常见 的 星 状 链接 。 所 谓 星 状 链接 是 指 每 个 页 面 之 间 都 建立 链接 。 
星 状 链接 结构 的 优点 是 浏览 方便 ,用 户 可 以 从 当前 页 面 跳 转 到 网 站 内 的 任何 页 面 中 。 网 
站 结构 如 图 11-1 所 示 。 




















































































































首页 
| | 
电影 音乐 图 书 联系 站 长 
| 
上 肖申克 的 救赎 Nevermlnd 追 风筝 的 人 
盗 梦 空间 我 的 歌声 里 J 
阿 甘 正 传 Heart 梦 出 发 挪威 的 森林 
夷 德 勒 的 名 单 阿 菲 正 传 达 . 芬 奇 密码 
图 11-1 站 点 结构 


11.1.2 定义 本 地 站 点 


在 Dreamweaver 中 使 用 “站 点 "菜单 中 的 “新 建 "命令 ,新 建 一 个 本 地 站 点 。 网 站 的 目 
录 结 构 是 指 建立 网 站 时 创建 的 目录 。 目 录 结 构 的 好 
坏 , 对 于 网 站 本 身 的 上 传 、 维 护 , 内 容 未 来 的 扩充 和 移 |[Bsmessit [bi 加 x] 
植 有 着 重要 的 影响 。 站 点 目录 结构 如 图 11-2 所 示 。 ee 

将 文件 分 门 别 类 地 放 在 不 同 的 文件 夹 下 ,本 网 站 [se 
的 目录 结构 如 下 : 

images 一 一 用 于 保存 图 像素 材 ; 

pages 一 一 用 于 存放 网 页 ， 

CSS 用 于 存放 CSS 样式 文件 ; | 

flash 用 于 存放 Flash 动画 ; 一 一 

source 一 一 用 于 临时 存放 未 处 理 的 各 种 素材 ,在 图 11-2 站 点 目录 结构 
站 点 完成 后 无 须 上 传 此 文件 夹 。 

有 了 总 体 结构 ,还 要 进行 基本 素材 的 收集 ,比如 文本 动画、 图 片 .音乐 ,视频 素材 等 ， 
并 将 其 保存 到 站 点 中 的 资源 文件 夹 (source) 中 。 

同时 ,需要 注意 的 命名 规则 : 

(1) 图 片 的 命名 原则 : 名 称 分 为 头 尾 两 部 分 ,用 下 画 线 隔 开 , 头 部 分 表示 此 图 片 的 大 
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类 性 质 例 如 广告 标志、 菜单 ,按钮 等 。 

(2) 放置 在 页 面 顶 部 的 广告 装饰 图 案 等 长 方形 的 图 片 取 名 为 banner。 

(3) 标志 性 的 图 片 取 名 为 logo。 

(4) 在 页 面 上 位 置 不 固定 并 且 带 有 链接 的 小 图 片 取 名 为 button。 

(5) 在 页 面 上 某 一 个 位 置 连续 出 现 , 性 质 相同 的 链接 栏目 的 图 片 取 名 为 menu。 

(6) 装饰 用 的 照片 取 名 为 pic。 

(7) 不 带 链接 表示 标题 的 图 片 取 名 为 title。 

下 面 是 几 个 范例 : banner_music. gif .banner. gif .menu_music. gif menu_movie. gif、 
title_news. gif ,logo. gif logo_bookl, gif。 


11.2 网 页 素材 准备 





11.2.1 绘制 页 面 草图 


首页 作为 网 站 的 入口 ,必须 为 浏览 者 提供 进入 栏目 页 面 的 链接 ,从 而 方便 浏览 者 对 相 
关内 容 进行 有 选择 的 阅读 。 另 外 ,首页 也 是 整个 网 站 的 综合 展示 ,在 首页 中 可 以 看 到 各 个 
栏目 的 相关 信息 ,以 吸引 浏览 者 继续 进行 阅读 。 因 此 把 各 部 分 排列 如 图 11-3 所 示 。 


标题 LOGO 导航 区 








滑动 banner 








区 块 内 容 1 区 块 内 容 2 区 块 内 容 3 



































页 尾 





图 11-3 首页 布局 草图 


网 页 的 内 容 页 是 指 用 来 放置 站 点 主要 内 容 的 页 面 ,是 网 站 的 子 页 面 。 在 内 容 页 也 包 
括 导 航 条 、 页 面 的 内 容 链接 、 文 章 列表 文章 信息 和 版 权 信 息 等 。 在 这 里 采用 横向 布局 , 整 
个 页 面 分 为 4 大 栏 ,如 图 11-4 所 示 。 


11.2.2 图 像素 材 的 准备 


图 像素 材 有 些 可 以 自己 制作 ,例如 使 用 Fireworks 制作 图 片 、Flash 制作 动画 等 ;有 些 
可 以 通过 其 他 途径 获得 ,例如 在 网 上 下 载 ,购买 素材 光盘 等 。 
虽然 在 多 数 情况 下 ,网 页 设计 者 不 需要 直接 创作 图 像 效 果 , 但 要 使 已 有 的 图 像 适合 网 
页 制作 ,常常 需要 用 图 像 处 理 软件 进行 加 工 处 理 。 
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标题 LOGO 导航 区 














页 面 主 体内 容 








页 尾 

















图 11-4 内 容 页 布局 草图 


首先 需要 将 素材 中 同 栏目 中 的 图 片 素材 ,利用 Fireworks 修改 到 一 致 的 大 小 比例 ,并 
根据 需要 ,分 别 制作 缩 略 图 与 大 图 两 种 效果 ,更 方便 进行 排版 ,同时 注意 文件 统一 命名 方 
式 , 如 图 11-5 所 示 。 
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图 11-5 图 片 统一 命名 处 理 


11.2.3 导航 条 的 制作 


为 方便 访客 浏览 ,导航 菜单 是 每 个 网 站 必 不 可 少 的 ,一 个 漂亮 精美 且 友 好 交互 的 导航 
条 是 每 个 站 长 所 向 往 的 。 通 过 CSS, 能 够 把 乏味 的 HTML 菜单 转换 成 漂亮 的 导航 栏 。 

设计 步骤 如 下 : 

(1) 为 了 整 站 风格 保持 统一 ,首页 和 内 容 页 导航 条 的 样式 效果 一 致 。 

(2) 使 用 列表 项 目 与 CSS 整合 的 效果 制作 横向 导航 条 。 
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(3) 制作 5 个 频道 ,并 为 当前 页 面 制 作 独 立 背 景 图 效果 ,实现 更 友好 的 用 户 体验 ,如 
图 11-6 所 示 。 





图 11-6 导航 条 及 当前 页 特殊 效果 


(4) 依次 为 每 个 按钮 添加 链接 地 址 ,这 个 步骤 可 保留 至 所 有 页 面 完 成 后 再 完成 。 
11.2.4 Flash 动画 的 制作 


首页 中 央 的 大 幅 Banner 采用 了 一 个 Flash 十 XML 的 图 片 轮 播 插件 ,利用 该 插件 可 以 
快速 方便 地 制作 出 炫目 的 图 片 切换 效果 。 

制作 步骤 如 下 : 

(1) 确定 Flash 图 片 轮 播 素材 的 大 小 ,由 于 该 插件 最 终 需要 完美 嵌入 设计 好 的 网 页 
中 ,所 以 需要 严格 规范 大 小 尺寸 ,在 这 里 为 980 像素 X364 像素 ,因此 ,需要 先 处 理 好 几 张 
大 小 一 致 .风格 相近 的 图 像素 材 。 这 里 使 用 了 4 张 图 片 ,分 别 代表 首页 .电影 .音乐 和 图 书 
几 种 风格 ,如 图 11-7 所 示 。 
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BBS 择 4 人 硕 和 大 小 132 MB 
有 eda) 创建 日 车: 2015-06-15 9:43 


图 11-7 Flash 轮 播 图 片 素材 














(2) 将 该 插件 所 需要 的 XML 文件、 播放 器 SWF 文件 ,以 及 需要 的 CSS 和 JS 文件 ， 
分 别 移动 到 我 们 的 站 点 中 ,并 分 门 别 类 放 在 不 同 的 目录 中 。 

(3) 在 使 用 图 片 轮 播 的 首页 index. html 中 ,添加 如 下 代码 ,并 指定 外 部 JS 的 路 径 以 
及 播放 器 的 尺寸 ,这 里 为 图 片 的 大 小 ,980px 宽度 ,364px 高 度 ,如 图 11-8 所 示 。 

(4) 修改 photo_list. xml 文件 ,指定 每 张 图 片 路 径 及 图 片 标题 文字 ,如 图 11-9 所 示 。 

如 此 生成 了 Flash 图 片 轮 播 banner,' 可 待 首 页 切片 导入 后 重新 再 导入 至 首页 ,预览 如 
图 11-10 所 示 。 该 播放 插件 包含 图 片 切换 、 播 放 与 停止 按钮 ,图 片 切换 动画 也 十 分 炫目 ， 
通过 插件 代码 的 修改 ,还 可 指定 图 片 切换 的 方向 .角度 及 切割 块 数 等 参数 。 
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插件 所 需 JS 文件 





<script type="text/javascript" src=Mcss/swfobject. 
</script> 
<script type="text/javascript"> 

var flashvars = {}; 

flashvars.xml_file = "photo_list.xml"; 

var params = {}; 

params .wmode = "transparent"; 

var attributes = {}; 

attributes.id = "slider"; 

swfobject.embedSwF ("flash_slider .swf", 
"flash_grid_slider", "9.0.0", false, 
flashvars, params, att' 
</script> 








Flash 播 放 器 宽度 和 高 度 
图 11-8 指定 播放 器 大 小 及 外 部 文件 路 径 


轮 播 图 片 的 路 径 


图 片 标题 文字 


<photo> 
<filename>| 
<descripti 
<transitior 

</photo> 











/p>]]></description> 


<photo> 


<filename>limages/slider/2. jpe} /filenane> 

<description><1[CDATAL<p class="subtitle" 六 叮 看 电影 4/p>]]></description> 
<transition flow="in" direction="up" rotation="-180"></transition> 

</photo> 





<photo> 


<filename>limages/slider/3.jpgt/filename> 
<description><iTCDATAT<p © ass="subtitle" 站 呆 听 音乐 /p>]]></description> 


<transition flow="out" direction="left" rotation="-189"></transition> 
</photo> 





<photo> 


“rilerane noges/sHaer /4 fo /filename> 
<description><1TCDATAT<p class="subtitle". /p>]]></description> 


<transition flow="out" direction="up" rotation="90"></transition> 
</photo> 


图 11-9 指定 图 片 路 径 及 标题 文字 





图 11-10 图 片 轮 播 预览 效果 
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11.3 网 页 制作 





11.3.1 首页 与 内 容 页 布局 


首页 的 制作 是 制作 整个 网 站 的 关键 环节 ,因为 大 多 时 候 访 问 者 都 是 通过 首页 进入 到 
企业 网 站 。 首 页 的 好 坏 直 接 影响 到 访问 者 是 否 会 在 该 网 站 停留 以 及 停留 时 间 的 长 短 。 这 
样 也 将 直接 影响 到 网 站 宣传 的 效果 。 这 里 采用 的 是 期 刊 杂志 式 的 首页 ,在 首页 上 有 站 点 
全 部 内 容 的 目录 索引 ,图 文 并 茂 ,看 上 去 就 像 是 期 刊 杂志 的 封面 。 在 首页 中 心 区 域 还 放置 
了 Flash 图 片 轮 播 banner, 既 漂亮 ,又 使 网 站 的 主要 内 容 一 目 了 然 ,是 一 种 值得 推荐 的 形 
式 ,如 图 11-11 所 示 。 


























图 11-11 首页 效果 图 


内 容 页 的 设计 包括 主体 版 面 布局 的 确定 ,版 面 颜色 和 字体 的 选择 .主题 版 面 各 模块 的 
添加 图片 和 链接 的 设置 等 。 

在 本 例 中 ,内 容 页 采用 与 首页 风格 一 致 的 LOGO、 导 航 条 及 背景 效果 ,同时 在 banner 
下 方 设计 了 一 个 缩 略 图 画廊 ,介绍 了 热门 的 素材 ,包括 插图 与 文字 信息 。 整 个 页 面 主体 内 
容 包 含 在 一 个 白色 矩 形 中 。 最 下 方 为 页 尾 版 权 信 息 , 如 图 11-12 所 示 。 

收集 或 制作 好 素材 后 ,根据 布局 草图 ,使 用 图 形制 作 软 件 Fireworks 把 它们 装配 起 
来 ,基本 可 以 绘制 出 网 页 的 效果 。 对 不 满意 的 地 方 可 以 进行 修改 ,直到 满意 为 止 。 效 果 图 
制作 完成 后 ,对 其 进行 切片 ,以 便 在 网 页 中 使 用 ,如 图 11-13 所 示 。 


11.3.2 ”内容 页 填充 


将 内 容 页 效果 图 切片 ,LOGO 部 分 单独 切片 ,用 来 做 回 到 首页 的 链接 。 导 航 部 分 切 
完整 一 片 ,大 小 尺寸 需要 与 事先 做 好 的 Flash 导航 一 致 。 缩 略图 画廊 单独 切片 ,这 部 分 的 
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肖申克 的 教 屿 | 























肖申克 的 到 同 The Shawshank Redemption (1994) 


和 
国庆 宛 公 检 并 汪 /有 了 节 全 

多 i/ 于 隆昌 最 内 HE 所 认可 和 / 克 二 再 在 | 青 人 公关 / 忆 交 对 
现 前 9 了 于/ < 得 光量 丰 六/ 尼 和 理 月/ 大 下 笠 / 大 下 特有 所 
5 有 夫 表 人 /和 要 和 更 

Re / 

市 上衣 /站 区 -关于 

和 :类 

LEG 1994-09-10(8 ESRD) /1994-10-14088D) 

10 人 种 

又 和 月 机 / 31905 和) / 生理/ 月 / 江 理 F9 相 台 


ee 
0 各 0 年代 表 小 有 的 商科 | 入 要 让 Tim Robtiny 从) 当当 子 
ET ， 生理， 作 导 其 轴 的 S 天 
玉 定 7 了 窒 二 证 他 的 人 生 。 趟 多 入 ， 闪 上 办 中 有 专人 (时 民 基 里 
员 Morgan Feeman 渍 ) , 未 广 个 己 抽 了， 了 二 人 过 地 ， 安 由 
和 大 和 天 瑞生， 黑 六 入 利于 自己 入 不 生 之 ， 亿 村 且 入 0 
下村 后汉， 六 入， 站- 多 夫 届 :9X 开 记 和 中 由 和 入 到 六 通 ， 于 和 
nt 华 人 壬 和 中 的 
关卡 戎 过 和 关于 其 和 机 办， 人 于 玉 这 一 切 寺 了 -上 
志和 村 名 作 和 有 王 节 全 [Siephen Edwin King ) 的 (民生 “204 代表， 小 
5 年 了 安 雪 帮 生 家 人 im Robons 作风 和 人 款 宙 了 人 而 人 
下 在 芭 和 为 上 二 ， 直至 人 于 坦 天 ,人 人 了 (无 夺 卫 定 了 冯 过 人 下 训 克 
人生， 未 多 X， 交 计划 5 史 98 要 和 人， 华 礁 和 和 本 Moren 
eeman 篇 | ， 访 六 宫 让 本 子 ， 以 此 放 英 负 二 人 于 性 ， 雪 答 由 人 
们 天 人 生 证 所 是 Mt 中 于 自生 之 芝 ， 折 用 自生 的 专业 中， 大 区 詹 
流风 与信 在 部 人 中 和 芝 到， 阐 来 多 忆 如 中 
国信 使 人 中流 用 当 可 有 
下 天 于 和 的 ,各 于 本 一 作 本 旭 了 -上 
志和 名 和 革 共 全 Siephen Ewin King ) 的 六， 





图 11-12 内容 页 效果 图 











电影 Movie 





图 11-13 首页 切片 图 
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边框 比较 特殊 ,无 法 在 网 页 编辑 状态 设计 ,必须 通过 Fireworks 布局 好 方 可 插入 网 页 


文部 分 可 以 不 用 特别 切片 ,因为 此 部 分 要 变化 多 次 ,形成 12 幅 不 同 效果 ,适合 在 


Dreamweaver 中 重新 排版 。 页 脚 版 权 信息 单独 切片 ,如 图 11-14 所 示 。 


要 特别 注意 的 是 ,大 段 文 字 不 要 切片 ,应 该 在 Dreamweaver 中 自行 输入 , 若 切片 , 则 


会 将 文字 变 成 图 片 ,使 网 页 文件 大 小 徒 增 。 


























网 HE 传 ”| ET ] 


肖申克 的 救赎 The Shawshank Redemption {1994) 


i 
让 调 天 奉 罗 训 新/ 总 具 苍 轩 / 鸳 煌 全 村/ 到 认 叶 束 和 鹏 各 笠 天 几 姐 / 去 /1 四 大 己 多 因果 
次 得/ 订 失 里 多 各 位 量化 兰 料 反 汪 /局 人 二 区 各/ 丰 好 胃 利 7 坟 卫 闪 / 


襄 英 下 
上 六 日 虹 1394-06-10( 人 公信 克 导 天) /1934-10-7 4 区 五) 
HE M2 
又 名 月 大 高 下 | /4 寺 19551 人 名) / :十 / 纺 窗 六 月 / 状 秋 因 反 敌 


人 这 一 地 区 入 才 了 一 沙 
sa) Ae rh 
人 ;四 和 


广 尝 的确 
以 tb 为 与 机 ,二 人 王 和 | 愉 ， 实 过 
EE 
和 和 A 
也 角 异 避 为 处 之 亲人 ， 史 对 自 Uid 泊 电信 顺民 人 攻关 + 的 天 蜡 所 掉 标 芭 
进 ， 下 关于 其 种 和 的 真相 TE 一 此 
坟 放 信者 各,F 委 兰 江 个 ( Sicohen Edhnn ng ] 的 上 和 枚 斋 、 





图 11-14 内 容 页 切片 效果 


完成 切片 导入 至 网 页 中 ,开始 为 内 容 页 添加 内 容 ,操作 步骤 如 下 ， 








(1) 删除 正文 区 域 的 内 容 , 并 将 该 区 域 单元 格 背景 色调 整 为 白色 ,将 垂直 对 齐 方式 修 








改 为 "顶端 ”, 这 样 该 区 域 将 会 随 着 内 容 的 长 短 自动 收缩 ,如 图 11-15 所 示 。 


(2) 插入 海报 图 片 , 将 其 浮动 方式 修改 为 " 左 对 齐 ”, 在 图 片 右 侧 插入 标题 及 正文 文 





字 , 为 正文 文字 添加 CSS 样式 ,设置 字体 的 大 小 .颜色 等 。 


(3) 调整 页 面 其 他 位 置 ,由 于 页 面 篇 幅 过 长 ,已 超出 切片 时 的 高 度 ,单元 格 背 景色 修 


改 为 白色 。 
(4) 将 CSS 导出 至 css 文件 夹 下 的 style. css 文件 中 ,方便 重用 。 完 成 编辑 ,保存 页 面 








由 于 采用 了 HTML5 十 CSS 的 方式 进行 页 面 布局 ,在 低 版 本 的 浏览 器 中 可 能 会 出 现 兼 容 性 





问题 ,推荐 使 用 Google Chrome 浏览 器 进行 预览 测试 。 按 Fl2 键 预览 ,如 图 11-16 所 示 。 
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图 11-15 删除 正文 图 片 





. [mem = 日 区 二 | 








| C 在 Dfile///Di/test/pages/movieLhtml \ 各 已 


肖申克 的 救 屿 ¥ fE 网 辛 德 勒 的 名 单 


Er 肖申克 的 a 号 The Shawshank Redemption (1994) 
人 
坊 凤 ;网 : 


np 
村 县 尔 于 四 村 利 办 
天 表情 | 生生 守重 多 


上 及 日 基 :1994-09-10( 多 人 外 | 
有 长/ 和 2 人 
又 名: 月 时 高 [起 )/ 刺 数 1995( 台 ] | 地 多 湛 言 /铁窗 内 月 / 消 香 克 的 四 风 


ge 


懂 与 瑞 潜 站 交 在 在 江 砷 下 昌 。 ET er 
转交 为 外 之 素 然 ， E 是 对 自由 各 望 仍 民 使 i a ， 而 关于 其 徘 行 的 真相 ， 似 笠 更 合 这 


切入 侈 (Stephen Edwin King) 的 ，{ 展 开 全 部 ) 20 世纪 40 年 代 末 小 有 成 入 青年 要 行家 安 近 ( 藻 旭 -史记 
斯 Tim Robbins 六) 国光 各 杀害 亦 子 太 # 人 而 搞 洒 入 伏 。 在 这 宇 名 凡尘 申 名 内 ， 闪 望 似 于 虚无 综 各 ， 终 身 : i 
六 | 梨 恨 徘 里 县 Morgan Freemar 


ye 和 有 到 | 
A 人 
Om 

未 并 机 所 名 关节 全 《Steghen Edwin Kng) 的 :入 。 
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图 11-16 内 容 页 预览 效果 
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11.3.3 基于 内 容 页 制作 模板 


内 容 页 分 为 上 下 两 个 部 分 ,本 网 站 有 一 组 风格 相同 的 12 个 网 页 ,外 观 是 一 样 的 ,只 是 
具体 内 容 不 一 样 ,因此 可 以 使 用 Dreamweaver 的 “模板 ”来 制作 。 使 用 模板 来 创建 网 站 的 
好 处 是 可 快速 建立 具有 统一 风格 的 多 个 网 页 ,提高 网 站 设计 与 制作 的 效率 。 

首先 制作 一 个 “模板 ”文件 ,内 容 页 套用 这 个 “模板 ”文件 。 模 板 创作 者 在 模板 中 涉及 
“固定 的 ”页 面 布局 ,然后 创作 者 在 模板 中 创建 可 编辑 的 区 域 ;如 果 创 作者 没有 将 某 个 区 域 
定义 为 可 编辑 区 域 ,那么 模板 用 户 就 无 法 编辑 该 区 域 中 的 内 容 。 使 用 模板 ,模板 创作 者 控 
制 哪些 页 面 元 素 可 以 由 模板 用 户 进行 编辑 。 模 板 创 作者 可 以 在 文档 中 包括 数 种 类 型 的 模 
板 区 域 。 

模板 最 强大 的 用 途 之 一 在 于 一 次 更 新 多 个 页 面 。 从 模板 创建 的 文档 与 该 模板 保持 连 
接 状 态 。 可 以 修改 模板 并 立即 更 新 基于 该 模板 的 所 有 文档 中 的 设计 ,从 而 提高 工作 效率 。 

建立 模板 的 步骤 如 下 : 

(1) 选择 “文件 "菜单 下 的 “新 建 " 命 令 , 新 建 一 个 模板 页 面 ,也 可 将 已 经 编辑 完成 的 
HTML 页 面 直接 “另存 为 模板 ”, 弹 出 "另存 模板 ”对 话 框 ,如 图 11-17 所 示 。 

(2) 选择 当前 站 点 ,在 “另存 为 "文本 框 中 输入 该 模板 的 名 称 ,这 里 输入 为 “content”， 
表示 内 容 页 ,模板 文件 会 自动 保存 到 站 点 目录 下 的 Templates 下 的 content. dwt。 

(3) 划分 模板 的 锁定 区 域 和 可 编辑 区 域 。 为 了 避免 编辑 时 候 误 操作 而 导致 模板 中 的 
元 素 变化 ,模板 中 的 内 容 默认 为 不 可 编辑 ,只 有 把 某 个 区 域 或 者 某 段 文本 设置 为 可 编辑 状 
态 之 后 ,在 由 该 模板 创建 的 文档 中 才 可 以 改变 这 个 区 域 。 

在 这 个 模板 中 ,标题 导航 部 分 及 页 尾部 分 是 该 类 别 网 页 的 共同 部 分 ,因此 为 锁定 区 
域 , 缩 略 图 栏目 和 中 间 部 分 是 每 个 网 页 的 具体 不 同 部 分 ,创建 为 可 编辑 区 域 。 先 用 鼠标 选 
取 区 域 (也 就 是 每 个 页 面 不 同 内 容 的 区 域 ) ,接着 运行 "插入 ”一 “模板 ”->“ 可 编辑 区 域 " 命 
令 , 并 且 在 弹出 的 对 话 框 中 为 这 个 区 域 设 定 一 个 名 称 ,这 样 就 完成 了 编辑 区 域 的 设置 ,如 
图 11-18 所 示 。 






























































is [meat | x 
3 的: [RD | | [RE 新 建 可 将 六 区 域 2 
名 称 article | [| 
此 区 域 将 可 以 在 基于 该 模 板 的 文档 
| 中 进行 编辑。 部 助 - 
撕 述 : 
图 11-17 另存 为 模板 图 11-18 新 建 可 编辑 区 域 





(4) 重复 上 述 过 程 ,为 模板 添加 栏目 图 片 、 缩 略图 和 正文 区 域 的 可 编辑 区 域 ,如 
图 11-19 所 示 。 模 板 的 编辑 过 程 与 普通 网 页 相同 。 
至 此 一 个 完整 的 模板 文件 就 制作 完成 了 ,下 面 就 套用 这 个 模板 来 制作 具体 的 页 面 。 
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辛 德勤 的 名 单 























ip 特 | 斯 项 荔 人 多 
如 里 盟 / 多 过 "内 顺 / 成 带 姐 - 赛 德 革 / 克 兰 丁 布朗/ 吉尔 ` 贝 罗斯 | 
罗斯 顿 / 篇 刘 斯 - 囊 竺 摩 / 杰 妇 里 - 德 曼 / 拉 蛙 布 兰 登 伯 格 / 尼 尔 吉 思 托 利 / 布 台 思 利 | 
i 大 卫 - 普 多 瓦尔 / 约 器 夫 萤 格 诺 / 福 管 塞 克 刊 拉 更 多 … 
国 兴 型 :到 情 / 犯 罩 


加 羡 。 制 片 下 室 /地 区 : 美国 











图 11-19 创建 多 个 可 编辑 区 域 


11.3.4 利用 模板 制作 其 他 页 面 


模板 文件 制作 完成 之 后 ,只 要 在 建立 新 的 HTML 文件 的 时 候选 择 要 套用 的 模板 就 
可 以 很 轻松 地 制作 出 外 观 统一 的 众多 页 面 ,而 且 , 当 今后 修改 模板 文件 的 时 候 ,软件 会 自 
动 对 使 用 了 该 模板 的 文件 进行 更 新 ,大 大 提高 了 工作 效率 。 

在 制作 首页 的 时 候 , 可 以 创建 几 个 空白 文件 来 做 栏目 链接 使 用 ,现在 只 要 对 这 几 个 文 
件 进行 适当 的 改动 就 可 以 生成 网 站 需要 的 内 容 页 。 

(1) 打开 网 页 ,执行 菜单 栏 上 的 “修改 >“ 模板 ”>“ 应 用 模板 到 页 ”命令 ,打开 “选择 
模板 ”对 话 框 ,如 图 11-20 所 示 。 在 “模板 ”列表 框 中 选择 content。 





远 择 措 板 





站 点 他) 
模板 了). re 








园 当 模 检 时 更 新 而 














图 11-20 选择 模板 


(2) 此 时 页 面 将 变 成 模板 文件 的 样子 ,其 中 在 模板 设 定 的 可 编辑 区 域内 的 文字 和 图 
片 是 可 以 修改 的 ,而 其 他 部 分 则 无 法 修改 。 接 下 来 ,只 要 把 相应 的 内 容 插入 各 自 的 可 编辑 
区 域 即 可 完成 页 面 的 制作 ,如 图 11-21 所 示 。 

(3) 重复 此 操作 ,可 以 将 其 他 内 容 页 面 也 制作 完成 。 
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辛 德勤 的 名 单 






































六 本 
有 过 卡 普 里 负 / 的 这 理 革 维和 委 | 文 伦 " 侗 吉 / 渡 边 详 / 汤 姐 - 哈 迪 | 迪 利 
2 惑 泊 王 / 基 里 安 * 醚 菲 /汤姆 "由 伦 杰 / 迈克 尔 遍 思 / 卢 卡 斯 "只 斯 / 皮特 裔 期 


名 陆 ) / 2010-07-08( 伦 敦 诈 映 ) / 2010-07-16( 美 国 ) 
间 ( 洪 ) / 全面 启动 ( 台 ) / 莫 基 / 心灵 犯案 / 记忆 过 阵 / 记忆 魔方 


图 11-21 编辑 内 容 页 











(4) 完成 所 有 页 面 后 ,需要 更 新 页 面 之 间 的 超 链接 ,确保 链接 无 误 


11.4 测试 发 布 





1， 本 地 测试 

制作 好 站 点 中 所 有 的 页 面 后 ,首先 要 对 整个 网 站 进行 测试 。 测 试 最 基本 的 方法 就 是 
在 Dreamweaver 中 打开 站 点 首页 ,然后 按 F12 键 预览 页 面 ,在 浏览 器 中 测试 每 一 个 页 面 ， 
看 内 容 是 否 能 正确 显示 ,尤其 要 测试 超 链接 是 否 能 正确 工作 。 

确保 整个 站 点 能 正确 工作 之 后 ,为 进一步 测试 超 链 接 的 正确 性 ,可 以 使 用 以 下 方法 : 
将 整个 站 点 目录 复制 到 另外 一 个 位 置 ,然后 在 浏览 器 中 打开 站 点 首页 ,测试 是 否 所 有 的 超 
链接 都 能 正确 工作 。 使 用 这 种 方法 能 够 检测 出 使 用 绝对 路 径 创建 出 的 不 正确 的 超 链 接 。 
如 果 碰 上 无 法 正确 跳 转 的 超 链接 ,应 回 到 原来 的 站 点 中 ,打开 相应 页 面 重新 设置 超 链接 。 

为 了 确保 不 同 的 浏览 者 能 够 看 到 一 致 的 页 面 效 果 , 制 作 好 的 网 站 还 应 在 不 同 的 显示 
分 辩 率 下 进行 测试 。 同 时 ,要 在 几 个 主流 浏览 器 的 最 新 版 本 下 做 测试 ,例如 Internet 
Explorer 或 Google Chrome。 另 外 ,还 需要 在 不 同 字体 显示 大 小 情况 下 进行 测试 ( 即 在 
“大 字体 ”和 “小 字体 ”两 种 方式 下 测试 ) ,以 确保 不 同 字体 设置 的 浏览 者 能 够 看 到 一 致 的 字 
体 效果 。 

2， 申请 域名 空间 

网 页 制作 完成 ,就 需要 把 它 放 到 Internet 上 ,让 全 世界 的 人 都 看 到 。 

对 于 大 型 企业 来 说 ,可 能 会 选择 自 架 服务 器 或 主机 托管 ,对 于 中 小 型 企业 或 个 人 网 
站 ,常常 会 选用 虚拟 主机 。 针 对 建站 的 个 人 爱好 者 ,可 以 选择 免费 的 个 人 空间 。 

申请 的 一 般 步 骤 为 ; 





第 11 章 个 人 网 站 综合 实例 201 


(1) 首先 取 一 个 自己 喜欢 又 容易 记 住 的 名 字 , 不 要 与 他 人 重复 , 即 为 账号 。 

(2) 在 申请 页 面 上 设 定 密码 并 填写 一 些 关于 自己 和 主页 的 资料 ,如 姓名 、 身 份 证 、 
E-mail 单位 等 。 

(3) 登录 成 功 ,服务 器 会 发 一 封 确认 信 。 过 一 定时 间 , 就 会 收 到 账号 开通 的 邮件 ,这 
封 邮 件 中 包括 FTP 地 址 .FTP 账号 和 密码 、 免 费 域名 等 ,这 些 需 自行 记录 保管 ,这 样 已 经 
成 功 地 申请 到 了 主页 空间 。 

3， 上 传 与 发 布 站 点 


主页 空间 也 申请 成 功 后 , 接 下 来 最 重要 的 就 是 上 传 网 页 ,给 Internet 上 用 户 浏览 。 上 
传 网 页 的 方法 有 很 多 种 ,比较 常用 的 是 FTP 类 的 上 传 软件 。 

4 站 点 的 维护 

网 站 建成 后 ,要 定期 对 站 点 进行 维护 。 保 持 站 点 有 效 地 运转 是 一 项 长 期 的 工作 。 特 
别 对 于 商业 网 站 来 讲 , 对 维护 工作 的 要 求 更 严格 。 在 此 简要 介绍 一 些 站 点 维护 过 程 中 要 
注意 的 事项 。 

(1) 保证 服务 的 安全 

网 站 的 安全 性 是 网 站 能 够 生存 的 一 个 必要 条 件 。 服 务 安全 不 仅 要 保护 用 户 的 数据 不 
会 被 泄露 ,还 机 保证 服务 的 有 效 性 。 用 户 能 在 任何 时 候 得 到 必要 的 服务 ,而 且 服务 的 内 容 
同 网 站 的 介绍 是 一 致 的 。 

(2) 及 时 回复 用 户 反馈 

在 企业 的 Web 站 点 上 ,要 认真 回复 用 户 的 电子 邮件 和 传统 的 联系 方式 如 信件 .电话 
垂询 和 传真 ,做 到 有 问 必 答 。 最 好 将 用 户 进行 分 类 ,如 售 前 一 般 了 解 、 售 中 和 售后 服务 等 
由 相关 部 门 处 理 ,使 网 站 访问 者 感受 到 企业 的 真实 存在 ,产生 信任 感 。 

5 站 点 更 新 


网 页 浏览 者 的 随意 性 决定 了 网 站 要 能 够 持久 地 吸引 用 户 , 必 须要 不 断 地 更 新 内 容 , 对 
用 户 保持 足够 的 新 鲜 度 。 在 内 容 上 要 突出 时 效 性 和 权威 性 ,并 且 要 不 断 推出 新 的 服务 栏 
目 ,不 能 只 是 在 原 有 的 基础 上 增加 和 删 减 ,必要 时 甚至 要 重新 建设 。 

另外 ,要 持续 推广 站 点 ,保持 公众 的 新 鲜 感 。 可 以 考虑 如 下 建议 ， 

。 在 各 大 搜索 引擎 上 登记 自己 的 网 站 ,让 别人 可 以 搜索 到 网 站 。 

。， 用 QQ, 微 信 、 微 博 等 通信 工具 ,把 网 站 地 址 传 给 其 他 潜在 访问 者 。 

。 可 以 在 BBS 上 作 宣 传 ,把 网 站 地 址 写 在 签名 里 。 

。 多 和 别 的 网 站 做 友情 链接 。 


本 章 实 训 


根据 本 学 期 所 学 过 的 关于 网 页 设计 与 制作 的 知识 ,并 结合 所 学 的 网 络 知识 ,着 手 进行 
个 人 网 站 的 规划 ,设计 与 制作 。 

实 训 要 求 : 

(1) 网 站 设计 方案 的 确定 ,要 求 : 
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。 确定 网 站 的 主题 。 

。 在 Internet 上 准备 素材 和 创作 网 站 。 

。 确定 访客 群体 的 需求 特点 。 

。 确定 站 点 结构 ,配色 方案 。 

。 确定 网 页 的 布局 方案 。 

(2) 设计 网 站 首页 及 其 他 页 面 , 使 用 Fireworks 绘制 首页 和 其 他 页 面 草图 。 
(3) 制作 网 页 主页 : 切割 图 片 .制作 动画 、 添 加 样式 .录入 文字 。 

(4) 制作 其 他 页 ,完善 优化 网 站 。 

(5) 写 出 实 训 报 告 和 提交 作品 。 

要 求 : 提交 实 训 报告 的 电子 文档 和 打印 文档 ,提交 作品 的 电子 版 。 


